Core concepts

Designs & the canvas

The design canvas is the heart of the Dreambase app — a visual, drag-and-drop view of your system's architecture and the data flowing through it.

A canvas of services

A design is a container for the services in a project. On the canvas, each service is a node you can position freely (every service instance stores its own x/y coordinates), and the edges between nodes describe how data and requests flow between them.

You build a design by dragging service definitions onto the canvas, wiring them together, and configuring each node through a details drawer. The canvas is interactive and persistent: your layout is saved, so the diagram always reflects the real shape of your system.

Built on React Flow

The canvas is powered by React Flow. Service nodes have custom shapes and icons, a right-side drawer configures each node's properties, and an action panel provides canvas-level controls.

Design is also deployment

Because every node is a real service, the picture you draw is not just documentation — it is the plan Dreambase executes. When you publish a project, the platform walks the design, hands each service to the right platform service, and creates the corresponding deployments in your target environment.

The AI assistant on the canvas

During setup, the assistant proposes an initial design from your description, suggesting services, connections, and templates. You stay in control — drag, drop, rewire, and reconfigure — but you rarely start from a blank canvas.

Keep the design honest

Treat the canvas as the source of truth for your architecture. Because running the project locally and deploying it both flow from the design, an accurate diagram means accurate infrastructure.