Fiasco Editor Platform

Appearance

Getting Started - TypeScript ​

This guide assumes some familiarity with web development and bundling. If you'd like a more minimal setup, see the quickstart.

We recommend running Vite with Bun, but you can use any js runtime and bundler you like, e.g. node with webpack for React or NextJS.

Create a vite project ​

bash
bun create vite

Add the tools package ​

WARNING

Fiasco is currently private, so for now you'll have to provide an access token to access the npm package

bunfig.toml

toml
[install.scopes]
"@vaguevoid" = { url = "https://npm.pkg.github.com/:_authToken=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", "username" =
"vaguevoid" }
bash
bun add @vaguevoid/tools @vaguevoid/fiasco @vaguevoid/platform-web

Create your tool ​

public/fiasco.json

json
{
  "name": "Hello Fiasco",
  "description": "A simple tool to say hello to Fiasco",
  "url": "http://localhost:5173",
  "emoji": "👋",
  "author": "Your Name"
}

vite.config.ts

ts
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Resource-Policy": "cross-origin",
    },
  },
});

Run your webserver ​

bash
bun dev

Add your tool to the Fiasco editor ​

To add your tool to the Fiasco editor, go to Custom Tools and enter the url output from the dev server - probably http://localhost:5173.

You're done! ​

If you want to use typescript or a framework like Vue or React, check out the TypeScript guide.

To get started with some examples, try Embedding the game