A visual low-code dashboard for the Canton Network ecosystem. Design, compose, and deploy Daml smart contracts through an intuitive drag-and-drop node graph — no Daml coding required.
Built with React Flow · Powered by the Global Synchronizer (Splice)
DAML Contract Builder lets you visually design smart contracts by dragging nodes onto a canvas, connecting them, and generating valid Daml source code in real-time. Think of it as Figma for Daml contracts.
- 🎨 Visual Contract Design — Drag & drop Template, Choice, Party, and DataType nodes onto a React Flow canvas
- ⚡ Real-time Code Generation — See valid Daml v3.4+ code generated live as you build
- 🔗 Canton Network Integration — Native support for Splice packages (
splice-amulet,splice-wallet,splice-amulet-name-service,splice-dso-governance) - 🤖 AI-Assisted Building — Describe your contract in natural language, get a visual graph
- ✅ Smart Validation — Real-time validation ensures your graph produces compilable Daml
- 🚀 One-Click Deploy — Compile and deploy directly to a Canton Validator Node
┌─────────────────────────────────────────────────────┐
│ Web Application │
│ ┌─────────────┐ ┌──────────┐ ┌───────────────┐ │
│ │ React Flow │ │ Monaco │ │ AI Assistant │ │
│ │ Canvas │◄─┤ Editor │ │ (Gemini) │ │
│ └──────┬──────┘ └────▲─────┘ └───────┬───────┘ │
│ │ │ │ │
│ ▼ │ ▼ │
│ ┌─────────────────────┴────────────────────────┐ │
│ │ Daml Code Generation Engine │ │
│ │ Graph → AST → Daml v3.4+ Source Code │ │
│ └──────────────────────┬───────────────────────┘ │
│ │ │
│ ┌──────────────────────▼───────────────────────┐ │
│ │ Canton API Client │ │
│ │ Ledger API · Scan API · Validator API │ │
│ └──────────────────────┬───────────────────────┘ │
└─────────────────────────┼───────────────────────────┘
│
┌───────────▼───────────┐
│ Canton Network │
│ (Global Synchronizer)│
└───────────────────────┘
| Layer | Technology |
|---|---|
| Framework | TanStack Start (SSR) + React 19 |
| Graph Editor | @xyflow/react v12 (React Flow) |
| Styling | Tailwind CSS v4 + shadcn/ui |
| Code Editor | Monaco Editor (Daml syntax) |
| API | ORPC (end-to-end type-safe) |
| Database | Drizzle ORM + SQLite/Turso |
| Auth | Better-Auth |
| AI | AI SDK (Google Gemini) |
| State | Zustand (canvas state) |
| Daml React | @daml/react (useQuery, useParty, useLedger, useStreamQueries) |
| Daml Ledger | @daml/ledger (JSON API client) |
| Auto-layout | ELK.js |
| Build | Turborepo + pnpm workspaces |
| Linting | Biome |
| Smart Contracts | Daml v3.4+ |
| Blockchain | Canton Network / Splice |
contract-builder/
├── apps/
│ ├── web/ # Main web application (TanStack Start)
│ │ └── src/
│ │ ├── routes/ # File-based routing
│ │ │ ├── builder.tsx # Visual contract builder
│ │ │ ├── builder/$projectId # Project editor
│ │ │ ├── projects.tsx # Project management
│ │ │ ├── ai.tsx # AI chat assistant
│ │ │ ├── dashboard.tsx # User dashboard
│ │ │ └── login.tsx # Authentication
│ │ ├── components/
│ │ │ ├── builder/ # Builder canvas, sidebar, nodes
│ │ │ └── ui/ # shadcn/ui components
│ │ └── stores/ # Zustand stores
│ └── docs/ # Documentation (Astro Starlight)
├── packages/
│ ├── daml-core/ # Daml type definitions & AST
│ ├── daml-codegen/ # Graph → Daml compiler & validator
│ ├── canton-client/ # Canton Network API client
│ ├── api/ # ORPC API routes & business logic
│ ├── auth/ # Authentication (Better-Auth)
│ ├── db/ # Database schema (Drizzle + SQLite)
│ ├── env/ # Environment variable validation
│ └── config/ # Shared TypeScript config
- Node.js ≥ 20
- pnpm ≥ 10.26
# Clone the repository
git clone https://github.com/your-org/contract-builder.git
cd contract-builder
# Install dependencies
pnpm install# Start local SQLite database (optional — for local dev)
pnpm run db:local
# Apply schema
pnpm run db:pushCopy the example env file and fill in your values:
cp apps/web/.env.example apps/web/.env| Variable | Description |
|---|---|
DATABASE_URL |
SQLite/Turso database URL |
DATABASE_AUTH_TOKEN |
Turso auth token (production) |
BETTER_AUTH_SECRET |
Authentication secret key |
GOOGLE_GENERATIVE_AI_API_KEY |
Gemini API key for AI features |
# Start all apps in dev mode
pnpm run dev
# Start only the web app
pnpm run dev:webOpen http://localhost:3001 to start building contracts.
| Command | Description |
|---|---|
pnpm run dev |
Start all apps in development mode |
pnpm run build |
Production build for all apps |
pnpm run check |
Run Biome linting & formatting |
pnpm run check-types |
TypeScript type checking across all packages |
pnpm run db:push |
Push schema changes to database |
pnpm run db:generate |
Generate Drizzle client/types |
pnpm run db:migrate |
Run database migrations |
pnpm run db:studio |
Open Drizzle Studio (database GUI) |
pnpm run db:local |
Start local SQLite instance |
See PHASE_PLAN.md for the detailed 5-phase implementation roadmap.
| Phase | Status | Description |
|---|---|---|
| Phase 1 | 🔜 | Foundation & Core Canvas |
| Phase 2 | 📋 | Daml Code Generation Engine |
| Phase 3 | 📋 | Canton Network Integration |
| Phase 4 | 📋 | AI-Assisted Contract Building |
| Phase 5 | 📋 | Testing, Deployment & Production |
- Daml Documentation: https://docs.digitalasset.com/build/3.4/
- Splice Documentation: https://docs.sync.global/
- Splice Repository: https://github.com/hyperledger-labs/splice
- Canton Network: https://www.canton.network/
- Featured Apps: https://sync.global/featured-apps/
- App Dev Slack:
#gsf-global-synchronizer-appdev(request access via operations@sync.global)
This project is licensed under the MIT License.