Your site, live
The canvas is the site itself, running. Click anything to select it.
Click anything.
Change it on real code.
The editor runs your real site in the middle of the screen. Whatever you click there is what you edit, and every field writes ordinary code into the site.
- StyleChange one element, or every one like it.
- ResponsiveStyle the phone without moving the desktop.
- CodeThe CSS and markup, one click away.
TandmadeHome /Desktop1200 px 93%View site
PagesLayersAddAssetsDesignContentForms2
TandmadeProductSolutionsShowcasePricingDocsLog inTry one page
For designers, studios and web teamsYou don’t need another website.
You don’t need another website.
You need a better way to run this one.
Bring your existing site or Figma design. Tandmade rebuilds it as editable code. Keep working with a visual editor and an agent.
yourstudio.com or a Figma linkTry one page
PricingThe site gets bigger. The bill doesn’t have to.$29/ month
per live site300 AI credits every monthUnlimited editorsHosting on Cloudflare
per live site300 AI credits every monthUnlimited editorsHosting on Cloudflare
You’ve already started.Existing websiteAI-built websiteFigma design
Hero title dimText · in ↑ Hero title
EditAgent
Desktop·Default·This text
Content
TText“You don’t need another website.”You don’t need another website.
StyleAgTypographyDisplay · 96/0.96 · TertiaryYou don’t need another website.SizeDisplay · 96 pxWeightMedium
LayoutIn column · Fill × HugWhat do you want to make or change?Change what's selectedAdd sections and pages in your site's styleAdjust colors, fonts and buttons everywhereYou'll see a proposal first; nothing changes until you apply it.Edit thisAdd sectionCreate pageReading the design system · 14 tokensReusing the card and button stylesWriting src/components/sections/Pricing.astroProposalAppliedNew section · PricingPricing.astro · index.astro · 2 filesReject−50 credits
Home page300Add section · 50 credits, 3 revisions included
Every field writes code
Styles you change are written to the site's own stylesheet, with your design tokens.
Seven areas, one bar
Pages, layers, elements, assets, design, content and forms.
StyleChange one thing.
Change one thing.
Or every button.
A line above the fields says where a change lands: the breakpoint, the state and who it applies to. Pick this element, or every one like it.
Hero title · HeadingArrive rested.
AgTypographyH1 · 64/1 · PrimarySizeH1 · 64 pxLine heightH1 · 1FontHeading · GeistColorPrimaryWeightMedium
Fields that follow your type scale
Size, line height and spacing sit on your design system's steps. Drag a field, or type a value.
The style panelWho should change?This button.button.is-small.nav_cta1 on every pagewinsEvery small button.button.is-small8 on all 7 pagesSite styleEvery button.button15 on all 7 pagesSite styleNew variant of this button…
Who should change?
This button, every small button or every button on the site. Each choice says how many places it reaches and whether it wins.
Who changes and whenResponsiveStyle the phone.
Style the phone.
Keep the desktop.
The width ruler switches the preview between your site's breakpoints. Whatever you style while previewing one applies only there.
MobileTabletLaptopDesktop7679911199Tablet · 991px and belowStyles you change apply here and on narrower screens. Desktop stays as is.
Any width, not three presets
Click a segment to jump to a breakpoint, or drag the ruler for any width in between and watch the layout reflow.
- Number keys switch breakpoints
- Mobile peek keeps a phone-width copy next to the canvas
- Add a breakpoint or change the widths the site switches at
CodeThe code is right there.
The code is right there.
And it's yours.
Every field in the inspector writes real code. When you want to see it, or change something no field covers, open the code dock under the canvas.
Rules 3VariablesAttributesMarkup
.hero_lead { max-width: 38rem; color: var(--text-color-secondary);}Edit the rule, watch the canvas
Rules, variables, attributes and markup behind the selected element. Edit a rule and the canvas follows.
The code dockvesperAstro projectsrc/pages/one file per pagesrc/components/sections and componentssrc/styles/site.cssyour classes; the editor writes heresrc/cms.config.tscollections and their fieldsdesign/tokens.jsoncolors, fonts, type, spacingDESIGN.mdgenerated summary of the design systemAGENTS.mdnotes for coding agentsastro.config.mjs
A standard Astro project
Pages, components, a stylesheet and a tokens file. The editor, the agent and your own tools change the same files.
Bring your own agentQuestions
Is the canvas a preview or the real site?
The real site, running in the middle of the editor. Whatever you click there is what you edit.
What does the editor write when I change something?
Ordinary code. Styles go into the site's own stylesheet with your design system's variables, and text goes into the page's file.
Can I change every button at once?
Yes. The inspector asks who should change: this element, every one with the same variant, or every one on the site. It shows how many places each choice reaches.
Do changes for mobile affect desktop?
No. Styles you change are saved for the breakpoint you're previewing, so a fix for tablets doesn't move the desktop layout.
Can I edit the code directly?
Yes. Open the code dock under the canvas to see and edit the rules and markup behind the selected element. The canvas follows as you type.
Open your own site in it.
One page is free.
Same design, rebuilt as real code you can edit by hand or with the agent.