Scamp user 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.

Contents

  • 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
  • Tables—Table tags, columns set once on the table, and row and cell styling
  • Components—Reusable components across pages, the component editor, the Data tab, per-instance text overrides, variants, and starter components
  • The Scamp framework—What a project is made of, which files Scamp owns, and how design, routes, and agents fit together
  • Views—A page's design as a component-shaped file, data bindings in the Data tab, and Scamp framework projects
  • Import a page from the web—Read a live web page or a React app's pages into views, what comes across, and what doesn't
  • 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 browser preview 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
  • Scamp Agent—The built-in AI agent: ask for changes, review them, undo them, and clean up imported pages
  • Work with AI agents—The MCP server, the live context file, Copy context, and how outside agents compare to the Scamp Agent
  • 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...TablesA table in Scamp uses real table tags—`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>`—so screen readers and search engines read it as a table. Scamp lays it out as a CSS grid, with 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.The Scamp frameworkEvery new Scamp project runs on the Scamp framework, a small framework built for the way Scamp works: a page is a design file you edit on the canvas and a logic file you or an agent write in code, ...ViewsA view is a page's design, kept in the same file shape as a [component](components.md): a props type, a function that renders the markup, and a CSS Module. The view holds the layout and sample data...Import a page from the webImport reads a live web page and turns it into a [view](views.md) in your project: real elements on the canvas, real TSX and CSS Module files on disk, editable like anything you drew yourself.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.Scamp AgentThe Scamp Agent is an AI assistant built into Scamp. You describe a change in the **Agent** panel, and the agent reads your design, makes the change on the canvas, and saves it to your files the sa...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 except the [Scamp Agent](scamp-agent.md) works the same whether 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.

See Scamp in action.

Book a 30 minute call. No slides. We walk through how you design and ship today, and I show you exactly where Scamp fits.

Schedule a demo →

30 minutes, no cost, with the person who builds Scamp.