turn your codebase to a design playground

one canvas where design and code are the same. pull in your real components, iterate with ai, and ship what you see — without handoff, no recreating, no round trips.

explore the canvas
cursor — playground
Explorer
■page.tsx
■globals.css
■PricingCard.tsx
■Navbar.tsx
■package.json
■README.md
import { cn } from '@/lib/utils'
interface PricingCardProps {
title: string
price: number
features: string[]
}
export default function PricingCard(
{ title, price, features }
) {
return (
<div className="rounded-xl p-6">
<h3>{title}</h3>
<span>${price}/mo</span>
canvas
components
component.⤢ 💬 📱 · · · ↗
Pro Plan
$29/mo
PricingCard.tsx
what it does

hybrid canvas

drag-and-drop assembly, inline ai prompts, and natural language — all writing back to real code.

database visualization

inspect and modify data models and records without writing a single query.

prompt management

surface, edit, and version ai prompts embedded in your codebase as first-class artifacts.

live structure map

a real-time representation of your product's ui, data, and logic — derived from the code, not a separate abstraction.

roadmap
nowcanvas shell
  • component tree
  • code ↔ canvas sync
  • component preview
nextai integration
  • natural language edits
  • prompt-aware rewrites
  • style tokens
laterfull canvas
  • live collaboration
  • database editor
  • one-click deploy

ship without opening your editor

join the early access cohort. first integrations for cofounder-generated apps.

open the canvas