# Flipnote Editor

A browser animation editor extracted from RexiMemo. The drawing interface is
the same: a 256×192 canvas, two ink layers, eight playback speeds, drawing and
paint tools, selections, transforms, text, onion skin and sound tracks.

This version runs on its own. It has no accounts, site navigation, online
library or server API. Files selected in the editor are read by your browser.
They are not sent anywhere.

## Run it

With Node.js 18 or newer:

```sh
npm start
```

Open **http://localhost:8090**. No dependency installation or build step is
needed. Alternatively, serve this folder with any static web server, for example:

```sh
python -m http.server 8090 --bind 127.0.0.1
```

Use localhost or HTTPS for microphone recording. Opening `index.html` directly
from disk is not supported because the text renderer loads local JSON.
For static hosting, copy the whole folder. Asset paths also work in a subdirectory.

## Files and audio

- **Tab 5 → Open .PPM** reads a Flipnote Studio file from your device, including
  its pages, ink colours, paper, hidden layers, sound effects and playback speed.
- **Tab 4** records music and three sound effects. Hold Shift while clicking an
  audio button to import an MP3 or WAV and trim it.
- **Tab 4 → Import Image** accepts local images and clipboard pastes.
- **Tab 5 → Save .WEBM** renders the animation and its audio into a video.

PPM writing, signing and online uploads are absent. WebM is the only animation
output. There is no editable project save format or automatic project backup;
keep the page open until you have finished. The browser asks before closing a
changed project. Tool preferences and keyboard shortcuts stay on your device.

Open the editor's settings button for zoom, the pixel grid, the desktop Shift
button and remappable shortcuts. The pixel grid appears at 400% zoom and above.
Text uses **Shift+T** by default.

## Source layout

| File | Purpose |
| --- | --- |
| `index.html` | Editor controls and dialogs |
| `assets/editor.css` | Original editor styling and shared form rules |
| `assets/bootstrap.js` | Asset loading, input fixes and touch Shift control |
| `assets/flipnote-editor/editor.js` | Drawing, pages, selection, audio and video rendering |
| `assets/flipnote-editor/drawing-engine.js` | Brush and paint behaviour |
| `assets/flipnote-editor/text-tool.js` | Pixel text tool |
| `assets/ppm-import.js` | Local PPM import adapter |
| `assets/vendor/flipnote.js` | Bundled PPM decoder |
| `tools/serve.cjs` | Optional local static file server |

Run `npm test` for the local import and release checks. Tests do not contact
RexiMemo or require an account. The original RexiMemo editor is not modified by
this standalone version.

## Licence

The editor code follows the source project's GNU AGPL version 3 licence. See
`LICENSE`. Bundled dependencies retain their own licences. Additional credits
are listed in `CREDITS.md`.