Editor
A web app for making one thing at a time, with a header bar, the work on a stage and an inspector of its settings, made from the inspector pattern.
The editor template is a small web app for making one thing: a header bar with undo and redo, the work on a stage in the middle, and an inspector of its settings beside it, which becomes a sheet on a phone. Use it for a tool where someone shapes a design, a document or a picture and sees it change as they go.
Start from it
Make the app
npx create-buttery my-app --template editorcreate-butterymakesmy-appin the folder you're in, named after the folder, and installs it with the package manager that ran it.Inside the buttery repository,
pnpm new-app my-app --template editorcopiesapps/templates/editortoapps/my-appinstead, with the next free port.Start it
cd my-app npm run devOpen the address it prints. The template is a web app;
--desktopadds the Tauri shell to it, as it does to any template.
What's inside
| File | What it does |
|---|---|
src/App.tsx | The editor: AppShell with a HeaderBar holding Start over, Undo and Redo, the design on a Stage, and the inspector; Command or Control Z undoes |
src/DesignInspector.tsx | An Inspector of two sections, each with Reset: the card's title and corners, then the canvas's shape and backdrop |
src/document.ts | The design, its defaults and canvas sizes, and the undo history, where typing or a drag is one step |
src/app.css | Sizes the card to the canvas with container units, so it scales the way an export would draw it |
src/router.tsx | The router every template has; the dashboard's page explains it |
src/main.tsx | Follows links, then renders the app inside ButteryProvider |
src/index.ts | What another app imports to show this one, as the docs site does for the preview |
e2e/smoke.spec.ts | Renders with no console errors, changes the design and walks Undo and Redo, and opens the sheet on a phone |
e2e/layout.spec.ts | Runs expectButtery on the editor with the sheet open, a new shape and a long title |
It's made from the inspector pattern inside the app shell. Its router is explained under routing on the dashboard's page.
A demo made from it
Deckhand is this template with a slide editor in place of the template's design: Halfmoon Roastery's pitch to cafés, a strip of slides to reorder, each slide's layout and look in the inspector, an arrange mode, presenting, and exporting a slide as an image.
Related
- Inspector
An editor's screen parts: the header bar, the stage it works on and the inspector of settings beside it.
- App shell
The frame of a whole app, as an editor or a dashboard, and the page that goes in it.
- Slider
A labeled slider row: the label and its value badge beside a track you drag, click or step with the keyboard.