Minifig

Minifig is a focused visual systems editor for creating polished landing-page scenes, product banners and editable diagrams.

Create a composition from a template, refine it on a canvas, preview responsive breakpoints, apply a visual theme, and export a production-ready asset.

Highlights

• Landing templates for SaaS heroes, feature sections, flow diagrams, logo clouds and social proof.
• Native browser mockups, terminal/code blocks, buttons, badges, cards and frames.
• Smart connectors with editable routes, labels and bound endpoints.
• Gradients, glass surfaces, masks, texture overlays and visual presets.
• Desktop, tablet and mobile composition targets.
• SVG, PNG, WebP, CSS, React and separate asset exports.
• Local .minifig project files and browser autosave.

Run locally

Requirements: Node.js 18+ and npm.

npm install
npm run dev

Open the URL shown by Vite, usually http://localhost:5173.

Validate

npm test
npm run build

Workflow

1. Choose a starting point from Assets → Starting points.
2. Edit copy, components, mockups and diagram connectors on the canvas.
3. Use the D / T / M controls to inspect desktop, tablet and mobile layouts.
4. Apply a theme and export the scene for your landing page.

Projects are saved locally as .minifig files. Imported images, SVGs and fonts remain embedded in the project file.

Project structure

src/
  editor/       Canvas rendering, layout, connectors and inspector controls
  elements.ts   Element factories and visual presets
  store.ts      Document state, history and persistence model
  export.ts     SVG and product handoff exporters
  App.tsx       Application shell and export workflow

License

Minifig is released under the MIT License.