Getting Started

To create a Fiasco tool, all you need is a valid html page served with some http headers.

This 5 min guide uses only html and js - no build step and no dependencies.

If you're using a framework like Vue or React, or want to use typescript in a build step, you'll want to follow Getting Started - TypeScript

Create your tool

fiasco.json

json

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

index.html

html

<html>
  <body>
    <h1>Hello Fiasco!</h1>
  </body>
</html>

Run any webserver

We'll use Bun but you can use any web server that allows specifying HTTP headers.

server.ts

const server = Bun.serve({
  port: 3001,
  fetch(req) {
    return new Response(
      Bun.file(new URL(req.url).pathname.substring(1) || "index.html"),
      {
        headers: {
          "Cross-Origin-Opener-Policy": "same-origin",
          "Cross-Origin-Embedder-Policy": "require-corp",
          "Cross-Origin-Resource-Policy": "cross-origin",
          "Access-Control-Allow-Origin": "*",
        },
      }
    );
  },
});

console.log(`Server running at http://localhost:${server.port}`);

Run your server locally using Bun

bash

bun server.ts

You can open your browser and navigate to http://localhost:3001 to see your tool in action.

You can also deploy the tool to a static hosting service like fly.io, Vercel or Github Pages.

Add your tool to the Fiasco editor

To add your tool to the Fiasco editor, go to Custom Tools and enter the url http://localhost:3001.

Embed the current game loaded into the editor

index.html

html

<html>
  <body>
    <h1>Hello Fiasco!</h1>
    <canvas id="game" style="width: 400px"></canvas>
    <script crossorigin src="https://tools.void.dev/FiascoTools.js"></script>
    <script type="module" src="hello.js"></script>
  </body>
</html>

hello.js

const canvas = document.querySelector("#game");
const game = await FiascoTools.mountPausedGame(canvas);

await FiascoTools.play(game);

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

Getting Started ​

Create your tool ​

Run any webserver ​

Add your tool to the Fiasco editor ​