Documentation

Scamp is a local-first design tool that generates real code as you design. Draw rectangles, add text, and adjust properties, and Scamp writes production-ready TSX and CSS Module files to your project folder. Edit those files outside Scamp and the canvas updates automatically.

Get started—Install Scamp, create a project, and learn the start screen
Canvas—Draw, select, move, resize, zoom, and size the canvas
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 learn how names map to CSS classes
Grouping—Group and ungroup elements into flex containers
Flex layout—Flex containers (direction, wrap, alignment, and gaps) and flex-child controls (grow, shrink, basis, align self, and order)
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 through the state switcher
Transitions—Smooth state changes through the Transitions section
Animations—Preset keyframe animations with full timing controls
Filters—CSS filter effects (blur, brightness, contrast, hue, and backdrop) through the Filters section
Transforms—Translate, rotate, scale, and skew, plus the transform origin, through the Transform section
Links between pages—Internal and external links through the Element section
Export—Save a page or element as PNG or SVG, or export the whole project as static HTML and CSS
Preview mode—Open the project in a real Next.js dev server window
Layers panel—The element tree: selection, collapsing branches, reordering, and nesting
Code output—What Scamp generates, save status, and the live code preview
Bidirectional sync—External editing and sharing files with AI agents
Work with AI agents—The MCP server, the live context file, and Copy context
Design system—The Design System panel, tokens, theme.css, and 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 width, radius, and shadow tokens
Themes—Light, dark, and custom theme switching
DESIGN.md—The generated design document for AI agents
Terminal—The built-in terminal panel
Settings—App and per-project configuration (projects folder, privacy, breakpoints, artboard, and fonts)
Linux—Wayland versus XWayland, display scaling caveats, and Linux troubleshooting
Accounts—Optional sign-in, sessions, and where Scamp stores your sign-in
Undo, redo, and history—Keyboard shortcuts plus the History panel for per-page history navigation
Snapshots—Durable point-in-time project backups, and how to preview and restore them from the History panel
Keyboard shortcuts—Complete shortcut reference
Changelog—What changed in each release, plus a full feature list

Get startedScamp requires macOS 13 (Ventura) or later, Windows 10 or later, or a 64-bit Linux desktop.CanvasThe canvas is your main workspace: a scrollable viewport where you draw elements that become real code. A floating toolbar above it holds the drawing tools, and a page-size control is pinned 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. Switch the canvas to Mobile, Tablet, or Desktop, and make style edits that land inside the correct `@media (max-width: Npx)` ...TypographyText elements have dedicated typographic controls in the [properties panel](properties-panel.md). To define reusable text styles and manage fonts for the whole project, 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 one component, used everywhere a ...Element namingEvery element in Scamp has a name that maps to its CSS class in the generated code.Group elementsGroup selected elements into a flex container to organize your layout.Flex layoutFlexbox is Scamp's default layout engine for a row of cards, a navbar, or a column of form fields. The **Layout** section of the [properties panel](properties-panel.md) exposes the whole flex vocab...Grid layoutCSS Grid lets you build two-dimensional layouts—cards in a three-column row, dashboards with a header, sidebar, and main area, image galleries—without writing CSS by hand. The Layout section of the...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, so eve...TransitionsAdd CSS transitions to any element from the [properties panel](properties-panel.md), so that hover, active, and focus changes animate smoothly. Transitions apply to whatever state changes you defin...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 of the [properties panel](properties-panel.md) applies CSS filter effects to an element without hand-written CSS: blur, brightness, contrast, saturation, hue rotation, and more....TransformsThe Transform section of the [properties panel](properties-panel.md) applies CSS `transform` functions to an element—move, rotate, scale, skew—without hand-written CSS. Transforms stack: each row i...Link 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 to** field in the Element section of the [properties p...ExportScamp exports in two different ways, for two different jobs:Preview modeOpen your project in a real browser preview window powered by Next.js. Real React, real CSS Modules, and real hot module reload: every transition, animation, hover state, link, and form input behav...Layers panelThe layers panel is in the left sidebar. It shows 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.Work with AI agentsScamp gives coding agents three ways to understand what's on your canvas, so you don't have to describe it. All three work with any agent that can read your project folder. The MCP server additiona...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 you ed...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 that you c...Design tokens: spacing, borders, radius, and shadowsBeyond 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 **Sh...Themes: light, dark, and customA 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 overrides only the sem...DESIGN.md: your design document for agentsScamp keeps a `DESIGN.md` file at the root of your project, next to `agent.md`. It's a summary of your design system that both people and agents can read: the tokens as structured data, plus prose ...TerminalScamp includes a built-in terminal, so you can run commands without leaving the app.SettingsScamp has two kinds of settings:LinuxScamp runs on Linux as an AppImage or a `.deb` package. This page covers the one Linux-specific behavior worth knowing about: how Scamp draws its window on Wayland.AccountsYou can sign in to a Scamp account from the start screen. Signing in is optional: Scamp is a local-first tool, and every feature works the same whether you're signed in or not. Nothing prompts you ...Undo, redo, and historyScamp tracks every change you make, so you can step backward and forward through your edit history—one step at a time with keyboard shortcuts, or by clicking an entry in the History panel to jump s...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, so...Keyboard shortcutsA complete reference of the keyboard shortcuts in Scamp.

Scamp user documentation

Contents

See Scamp in action.