Getting started

FlatInk is a creative environment that runs in a browser tab. It brings together vector drawing, timeline animation and a readable scripting language. No installation, no account.

Opening the editor

Everything happens in the browser. The Open the editor button leads to a blank workspace. Projects are saved locally, on your machine. No data is sent to a server, and every project can be exported as a .flatink file to be archived or shared.

The principle, in three steps

FlatInk follows the same thread, from the first stroke to the final experience.

1. Draw. The vector tools (brush, pen, shapes) produce objects that can be moved, colored and grouped. Fills merge with one another, the way ink does.
2. Animate. On the timeline, you place keyframes. Between two keys, FlatInk interpolates position, scale, rotation and opacity. A reusable symbol can be placed as many times as needed.
3. Make it interactive. A few lines of FlatInk Script are enough to react to a click, a hover or a drag. The code stays visible and editable.

Where to go next

The following guides are project-oriented. Each one builds a concrete result from start to finish, rather than listing tools.

• Make an animated logo: one shape, two keyframes, and a tween that connects them.
• A drag-and-drop mini-game: pieces to grab, move and drop, with snapping.
• The FlatInk Script language: the reference for events, actions and expressions.

Worth knowing

• Local first. Projects live in browser storage. Export a .flatink to keep them for the long term.
• Made for publishing. A static scene exports to SVG. An animated or interactive scene embeds through the standalone player, in any web page.
• Nothing is hidden. Variables, expressions and events remain visible in the code editor and the logic map.

For developers

FlatInk’s language, format and player are open source and published on npm, under the MIT license: flatkit brings together the language, the compiler (flatc) and the lightweight player.

npm i @flatkit/player        # play a .flatpack in a <canvas>
npm i -D @flatkit/compiler   # the flatc CLI (.flatink → .flatpack)

Embed a scene into any page programmatically, or compile a program from the command line — without the editor. The .flatpack format is in beta: expect changes.