Scenes · Nodes · Rendering · Gradients · Hit Testing · Transforms · Infinite Canvas
@flowscape-ui/core-sdk
Click the demo to open the live Playground.
Flowscape provides the 2D graphics, scene, rendering, and interaction foundation behind sophisticated editor-like applications.
Build design tools, whiteboards, diagram editors, visual builders, node editors, CAD-like interfaces, and custom infinite-canvas experiences without rebuilding the same engine infrastructure every time.
You build the product. Flowscape powers the canvas.
| Scene graph | Rendering | Interaction |
|---|---|---|
| Layered scenes | Canvas renderer | Hit testing |
| Node hierarchy | Gradient paints | Selection foundations |
| Groups and transforms | Renderer abstraction | Transform overlays |
| Bounds and coordinates | Demand-driven invalidation | Pan and zoom |
| Background / World / Overlay / UI | Render-host architecture | Editor-style controllers |
🎨 Paint system
- Solid colors
- Linear gradients
- Radial gradients
- Conic gradients
- Diamond gradients
- Mesh gradients
- Fill and stroke rendering
🧩 Built-in node types
- Rect
- Ellipse
- Polygon
- Star
- Line
- Path
- Text
- Image
- Video
- Group
🧭 Editor foundations
- Infinite canvas camera
- Pan and zoom
- Bounds and hit testing
- Selection overlays
- Transform handles
- Layered rendering
- Renderer-independent scene state
Flowscape is a framework-agnostic 2D engine for building complex graphical applications.
It sits between low-level rendering libraries and full products, providing a reusable engine layer for scenes, nodes, transforms, rendering, interaction systems, overlays, and infinite-canvas workflows.
It is not a UI framework and it does not dictate how your application should look.
Your application owns the UI and product logic. Flowscape owns the graphics engine underneath it.
Flowscape is designed for products such as:
- Figma-like design tools
- Infinite canvas applications
- Whiteboards and diagram editors
- Visual and page builders
- Node-based editors
- CAD-like 2D interfaces
- Internal graphical editor tools
Using Bun:
bun add @flowscape-ui/core-sdkUsing pnpm:
pnpm add @flowscape-ui/core-sdkUsing npm:
npm install @flowscape-ui/core-sdkUsing Yarn:
yarn add @flowscape-ui/core-sdkCreate a container:
<div id="app"></div>Give it a visible size:
html,
body,
#app {
width: 100%;
height: 100%;
margin: 0;
}Then create a scene:
import {
Scene,
LayerBackground,
LayerWorld,
LayerOverlay,
RendererLayerBackgroundCanvas,
RendererLayerWorldCanvas,
RendererLayerOverlayCanvas,
CanvasRendererHost,
NodeRect,
} from "@flowscape-ui/core-sdk";
const container = document.getElementById("app");
if (!container) {
throw new Error("Container #app not found");
}
const scene = new Scene(container.clientWidth, container.clientHeight);
const background = new LayerBackground();
const world = new LayerWorld();
const overlay = new LayerOverlay(world);
scene.addLayer(background);
scene.addLayer(world);
scene.addLayer(overlay);
scene.bindLayerRenderer(background, new RendererLayerBackgroundCanvas());
scene.bindLayerRenderer(world, new RendererLayerWorldCanvas());
scene.bindLayerRenderer(overlay, new RendererLayerOverlayCanvas());
const host = new CanvasRendererHost(container, -1);
scene.addHost(host);
background.setFill("#101010");
const rect = new NodeRect(1);
rect.setPosition(300, 220);
rect.setSize(220, 140);
rect.setFill("#3b82f6");
world.addNode(rect);
scene.invalidate();For input controllers, selection, transformations, camera controls, and advanced editor workflows, see the documentation.
import {
Scene,
NodeRect,
LayerWorld,
CanvasRendererHost,
} from "@flowscape-ui/core-sdk";Flowscape can also be used directly in the browser without a bundler.
<script src="https://unpkg.com/@flowscape-ui/core-sdk/dist/flowscape.global.js"></script>
<script>
const scene = new Flowscape.Scene(1280, 720);
</script>The standalone build exposes the public API through the global Flowscape object.
const rect = new Flowscape.NodeRect(1);Flowscape separates scene state, rendering, and interaction logic.
Flowscape
│
┌─────────────┼─────────────┐
│ │ │
Scene Nodes Controllers
│ │ │
Layers Transform Input
│ │ │
└─────────────┼─────────────┘
│
Renderer API
│
Canvas backend
│
Browser
The scene is organized into dedicated layers:
Scene
├── Background Layer
├── World Layer
│ └── Nodes
├── Overlay Layer
│ └── Handles / Selection / Transformations
└── UI Layer
This separation allows rendering implementations to evolve without requiring editor-level product logic to be rewritten.
Most canvas libraries provide rendering primitives.
Flowscape aims to provide the engine layer above those primitives.
Instead of rebuilding the same infrastructure for every graphical product, developers can start with reusable foundations for:
- scene organization
- node hierarchy
- coordinate systems
- camera behavior
- rendering
- hit testing
- selection
- transformation
- interaction systems
- editor overlays
Flowscape is closer in philosophy to an engine for graphical applications than to a component library or ready-made editor.
Flowscape is developed as a Turborepo monorepo.
flowscape/
├── apps/
│ ├── docs/
│ └── playground/
│
├── packages/
│ └── engine/
│
├── package.json
├── turbo.json
└── bun.lock
The Flowscape documentation application.
The interactive development environment and public engine showcase.
The core Flowscape engine, published as:
@flowscape-ui/core-sdk
Flowscape uses Bun, Turborepo, TypeScript, and tsdown.
Clone the repository and install dependencies:
bun installRun the Playground:
bun run dev:playgroundRun the documentation:
bun run dev:docsBuild the monorepo:
bun run buildRun type checking:
bun run typecheckRun linting:
bun run lintMore information about contributing can be found in CONTRIBUTING.md.
Applications should import Flowscape exclusively through the public package API:
import { Scene, NodeRect } from "@flowscape-ui/core-sdk";Do not import internal modules directly:
// ❌ Do not do this
import { Scene } from "@flowscape-ui/core-sdk/src/scene";Internal project structure may change between releases.
Only exports available through @flowscape-ui/core-sdk should be considered part of the public API.
Flowscape is under active development.
The architecture and internal implementation continue to evolve as the engine expands toward more advanced rendering, interaction, and editor systems.
Public API stability is treated as a priority, but major releases may introduce intentional breaking changes when necessary for the long-term architecture of the engine.
See CHANGELOG.md for release history.
Contributions, bug reports, and feature proposals are welcome.
Before contributing, please read CONTRIBUTING.md.
For bugs and feature requests, use the project's GitHub Issues.
See AUTHORS.md.
Flowscape is developed as an open-source project.
If Flowscape is useful to you or your team, you can support its continued development.
Flowscape is released under the MIT License.
© Flowscape UI Team