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
  • Themes — Theme tokens, the theme.css file, and using tokens in your designs
  • 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
  • Keyboard Shortcuts — Complete shortcut reference
Getting Started## InstallationCanvasThe 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).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.ThemesScamp supports design tokens through a `theme.css` file in your project folder. Tokens let you define reusable values — colors, spacing scales, font sizes, line heights — and apply them across your...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 ...Keyboard ShortcutsComplete reference of keyboard shortcuts in Scamp.