Scamp User Documentation

Scamp is a local-first design tool that generates real code as you design. Draw rectangles, add text, adjust properties, and Scamp writes production-ready TSX and CSS Module files to your project folder. Edit those files externally — in VS Code, a terminal, or with an AI agent — and the canvas updates automatically.

Table of Contents

  • Getting Started — Install, create a project, and understand the start screen
  • Canvas — Drawing, selecting, moving, resizing, zoom, and canvas sizing
  • Elements — HTML tags, tag-specific attributes, inputs, select, and svg
  • Properties Panel — Visual and CSS editing modes for element styles
  • Breakpoints — Responsive design with per-breakpoint overrides
  • Typography — Text elements, fonts, and typographic controls
  • Color Picker — Colors, alpha, hex input, and theme tokens
  • Element Naming — Rename elements and how names map to CSS classes
  • Grouping — Group and ungroup elements into flex containers
  • Grid Layout — CSS Grid containers, columns, rows, and grid-item placement
  • Components — Reusable components across pages, the component editor, the Data tab, and per-instance text overrides
  • Element States — Hover, active, and focus styles via the State Switcher
  • Transitions — Smooth state changes via the Transitions section
  • Animations — Preset keyframe animations with full timing controls
  • Filters — CSS filter effects (blur, brightness, contrast, hue, backdrop) via the Filters section
  • Linking Between Pages — Internal and external links via the Element section
  • Export — Save the current page or selected element as PNG or SVG
  • Preview Mode — Open the project in a real Next.js dev server window
  • Layers Panel — The element tree, selection, reordering, and nesting
  • Code Output — What Scamp generates, save status, and the live code preview
  • Bidirectional Sync — External editing and working with AI agents
  • Design System — The Design System panel, tokens, theme.css, and using tokens in your designs
  • Colors — Color palettes (primitives) and semantic color tokens
  • Text Styles — Fonts, the type scale, and reusable text styles
  • Design Tokens — Spacing, border widths, radius, and shadow tokens
  • Themes — Light, dark, and custom theme switching
  • DESIGN.md — The auto-generated design document for AI agents
  • Terminal — The built-in terminal panel
  • Settings — App and per-project configuration (breakpoints, artboard, fonts)
  • Undo, Redo, and History — Keyboard shortcuts plus the visual History panel for per-page history navigation
  • Snapshots — Durable point-in-time project backups, previewing, and restoring from the History panel
  • Keyboard Shortcuts — Complete shortcut reference
Getting Started1. Download the Scamp installer for your platform. 2. Run the installer and follow the on-screen prompts. 3. Launch Scamp from your Applications folder (macOS) or Start Menu (Windows).CanvasThe canvas is your main workspace — a scrollable viewport where you draw elements that become real code. A floating toolbar sits above it with the drawing tools, and a page-size control pins to the...ElementsEvery Scamp element is rendered as a real HTML tag in the generated code. By default rectangles are `<div>`, text is `<p>`, images are `<img>`, and inputs are `<input>` — but you can change any ele...Properties PanelThe properties panel is on the right side of the screen. It shows editable properties for the selected element. It has two modes, toggled at the top: **Visual** and **CSS**.BreakpointsDesign for multiple screen sizes without writing media queries by hand. Scamp's breakpoint system lets you switch the canvas to Mobile, Tablet, or Desktop and make style edits that land inside the ...TypographyText elements have dedicated typographic controls in the [Properties Panel](properties-panel.md). For defining reusable **text styles** and managing fonts project-wide, see [Text Styles](text-style...Color PickerThe color picker appears whenever you click a color swatch in the [Properties Panel](properties-panel.md) — for background, border, text color, or shadow color. It's a single component used everywh...Element NamingEvery element in Scamp has a name that maps to its CSS class in the generated code.Grouping ElementsGroup selected elements into a flex container to organize your layout.Grid LayoutCSS Grid lets you build complex two-dimensional layouts — cards in a 3-column row, dashboards with header / sidebar / main, image galleries — without writing CSS by hand. Scamp's Layout section in ...ComponentsA component is a reusable piece of UI that lives in its own folder and can be dropped onto any page. Edit it once and every instance across every page updates.Element StatesDesign hover, active, and focus styles directly in the [Properties Panel](properties-panel.md). Scamp writes them as `:hover`, `:active`, and `:focus` pseudo-class blocks in your CSS module — every...TransitionsAdd CSS transitions to any element from the [Properties Panel](properties-panel.md) so hover, active, and focus changes animate smoothly. Transitions ride along with whatever state changes you've d...AnimationsApply CSS keyframe animations to any element from a curated preset library. Scamp writes the `animation` shorthand on your element's class and the matching `@keyframes` block at the bottom of the C...FiltersThe Filters section in the [Properties Panel](properties-panel.md) lets you apply CSS filter effects to an element without writing CSS by hand — blur, brightness, contrast, saturation, hue rotation...Linking Between PagesMake any element clickable and link it to another page in your project — or to an external URL. Scamp routes the destination through the **Link** field in the [Properties Panel](properties-panel.md...ExportScamp can export the current page or a selected element as a **PNG** or **SVG** without leaving the app. The Export section sits at the bottom of the WYSIWYG panel (Figma-style), so it's always rea...Preview ModeOpen your project in a real browser preview window powered by Next.js. Real React, real CSS Modules, real hot module reload — every transition, animation, hover state, link, and form input behaves ...Layers PanelThe layers panel is in the left sidebar. It displays your element tree -- every element on the current page, organized by nesting depth.Code OutputScamp generates real, production-ready code files as you design.Bidirectional SyncScamp's defining feature is two-way sync between the canvas and your code files. Edit in Scamp and the files update. Edit the files externally and the canvas updates.Design SystemScamp's design system lets you define your project's colors, type, and spacing once — as named tokens — and reuse them everywhere. Tokens live in a `theme.css` file in your project folder, and the ...ColorsThe **Colors** section of the [Design System panel](design-system.md) manages your project's color palettes and semantic color tokens. It has two parts: **Primitives** (the raw palettes) and **Sema...Text StylesThe **Typography** section of the [Design System panel](design-system.md) manages three things: the **fonts** available to your project, a **type scale** of reusable sizes, and named **text styles*...Design TokensBeyond colors and type, the [Design System panel](design-system.md) has four sections for the values that give your design its rhythm and depth: **Spacing, Border widths, Radius,** and **Shadows**....ThemesA **theme** is a set of values for your semantic color tokens. Every project starts with one theme — **Light** — and you can add **Dark** or any number of custom themes. Each theme only overrides t...DESIGN.mdScamp keeps a `DESIGN.md` file at the root of your project, next to `agent.md`. It's a human- and agent-readable summary of your design system: the tokens as structured data, plus prose describing ...TerminalScamp includes a built-in terminal so you can run commands without leaving the app.SettingsScamp has two kinds of settings:Undo, Redo, and HistoryScamp tracks every change you make so you can step backward and forward through your edit history — either one step at a time with keyboard shortcuts, or by clicking any entry in the History panel ...SnapshotsSnapshots are durable, point-in-time backups of your whole project — every page and component file — saved inside the project itself. Unlike undo history, they survive closing and reopening the app...Keyboard ShortcutsComplete reference of keyboard shortcuts in Scamp.