Plait: a framework for whiteboard apps, not a whiteboard app

What problem Plait solves for a product team

Plait is described in the README as a modern drawing framework for building an all-in-one whiteboard tool, with interactive drawing features such as mind maps, flowcharts and freehand drawing. The framing matters. This is not a whiteboard application you install and use, it is the layer underneath one, and the audience is a product team that needs a board inside an existing web product. A knowledge base with diagrams, a design tool with a canvas, a planning app with a flow editor: each of those needs a board with zoom, scroll, selection, and elements that can be moved and edited, and each would otherwise start from a blank canvas implementation. The README calls the framework a plugin mechanism that lets developers extend drawing functionality through plugins, and the intent is that a team assembles the drawing features it needs instead of shipping a monolith of drawing code. The project is developed in TypeScript and published as a set of scoped npm packages under the @plait scope, with the framework core described as the piece that holds the plugin design, the data models, data transformation functions, zooming and scrolling.

The plugin mechanism and a data model built for collaboration

The features list names five things the framework provides on its own: independence from UI frameworks, basic board capabilities such as zooming in, zooming out and moving, the plugin mechanism itself, a data model, and basic drawing utility functions. The data model is the piece with the widest reach, and the README marks it as supporting collaboration. What that means structurally is that the board's content is a value that can be passed in, transformed, and handed back, rather than state hidden inside a component. The usage example shows the shape of that: a component holds a value of type PlaitElement[], hands it to the board through a plaitValue input, and receives change and initialized outputs, where the change event carries an OnChangeData payload and the initialized event hands back the PlaitBoard instance. A board that is a serialisable value is what makes undo, persistence, and multi-user editing somebody else's problem, and it is also what lets the same board be loaded from a server rather than reconstructed. The README does not document a collaboration protocol here, so the data model being collaboration friendly should be read as a property of the structure, not as a statement that a sync layer is included.

What each package in the @plait scope contains

The package table in the README describes a deliberate split between the framework, the shared drawing code, and the individual plugins. @plait/core is the framework core with the plugin mechanism design, the data models, the data transformation functions, and zooming and scrolling. @plait/common holds common functionality for interactive drawing, text rendering and editing. @plait/text-plugins provides general text extension functionality and is explicitly UI framework independent, relying on the Slate rich text editor framework. Then come the feature plugins. @plait/mind is the mind map plugin, built on an independent automatic layout algorithm and supporting logical layout, standard layout and indent layout. @plait/draw is the flowchart plugin, with basic shapes, flowchart shapes, connections and free images. @plait/flow is the process orchestration plugin, with standard nodes, connections and custom nodes. @plait/graph-viz does graph visualization with force atlas for knowledge graphs. @plait/layouts holds the mind map layout algorithms on their own. Four more packages are the view layer bindings: @plait/angular-text, @plait/angular-board, @plait/react-text and @plait/react-board.

Angular and React view layers with Slate underneath

Plait does not rely on any frontend UI framework at its core, but the README is clear that the implementation requires components from a UI framework as carriers, so that drawing functionality follows mainstream data-driven development patterns. The consequence is that the framework agnostic part is the model and the logic, and the rendering part comes from a small set of adapter packages. Integration with Angular and React is supported, each with a board component and a text rendering component, so the choice of UI framework is a decision you make at the start and pay for in the packages you install. Text is the deeper dependency. Text rendering is based on the Slate framework, which enables rich text rendering and editing on the board, and the README says the design of Plait was inspired by Slate. That inheritance is visible in the package layout, since @plait/text-plugins is UI framework independent and sits on Slate, while the Angular and React text packages are thin layers that add the framework specific view. The README also thanks rough and slate-angular, which tells you that the hand drawn look and the Angular Slate binding come from outside projects rather than from this repository.

Building a board in Angular with the mind plugin

The usage section shows the smallest possible board. In the template you place a plait-board element and bind three things: the list of plugins, the board value, and the two output events for initialization and change.

<plait-board [plaitPlugins]="plugins" [plaitValue]="value"
    (initialized)="initialized($event)" (change)="change($event)">
</plait-board>

The component side then holds the plugin list, the value and a reference to the board, which is what the earlier core data model discussion was about: the content lives in a PlaitElement array that the component owns and passes down.

// .ts
@Component({
  selector: 'board-basic',
  templateUrl: './board-basic.component.html',
  host: {
    class: 'board-basic-container',
  },
})
export class BasicBoardComponent {
  plugins = [withMind];

  value: PlaitElement[] = demoData;

Note what is absent. There is no board construction code, no canvas element, no event plumbing to write, and no import of a rendering engine in the example. The plugin is the unit of capability, and withMind in the plugins array is what turns this board into a mind map board. The README points to a separate example repository for more detailed cases, and the live examples cover draw, mind, graph visualization and flow, which is the fastest way to see what each plugin actually gives you before committing to an integration.

The workspace build and the publish chain

Plait is an npm workspaces monorepo, with the workspace globs pointing at a packages directory, and the README gives the three commands that get you from a clone to a running demo.

npm i

npm run build

npm run start

The build is not a single step, and the root package.json shows why. The build script chains the individual package builds in dependency order, starting with core and common, then text-plugins, then the layouts build, then mind, flow, draw, graph-viz, and finally the Angular text and board packages.

        "start": "ng serve --host=0.0.0.0",
        "build:common": "ng build common",

Each package build also copies its SCSS files into the dist directory, which is why the cpx step appears next to the Angular build rather than being handled by the bundler. Publication follows the same pattern, with a separate pub script per package that changes into the matching dist folder and publishes with public access, so the npm packages are built from the dist output rather than from source. If you are contributing, the repository also carries a .changeset directory, a docgeni documentation setup with a build:docs script, and a playwright-report and test-results directory, which suggests end to end browser tests are part of the loop. The README asks contributors to read the Contributing Guide and to open issues or pull requests, and it notes that a Chinese version of the README exists.

Framework or finished app, and the licence that follows

There is a decision here that is easy to postpone and awkward to undo: build a product on the framework, or adopt a finished whiteboard application. The README names the second path in practice, pointing to Drawnix as the React view layer and text rendering component implementation, and listing PingCode Wiki among the projects using Plait. The difference in approach is ownership. Adopting a finished application means the feature set and the roadmap are someone else's, and your only lever is configuration. Building on the framework means you assemble the plugins you want, own the data model and the storage, and can extend the board with your own plugin, but you also own the board chrome, the persistence, the collaboration server and the maintenance of that code. The second decision is the licence. Plait is MIT licensed, which lets you use, modify and redistribute the code, including inside a commercial product, with the requirement that the copyright and licence notice travel with it, and it places no condition on code that links to it. On maintenance, the repository is not archived and the last push was on 2026-09-23 on the develop branch, but the release tags tell a slower story, with v0.64.6 dated 2024-08-08, v0.64.0 on 2024-07-15 and v0.62.0 on 2024-07-08. Continuous work on the branch and a stale tag list is a normal pattern for a monorepo that releases on its own schedule, but it does mean you should check the version published to npm for @plait/core before you pin it, rather than assuming the tag list reflects the current state of the code.

Editorial conclusion

Plait fits a team that needs a whiteboard inside an existing product and wants mind maps, flowcharts, freehand drawing and a force directed graph view without writing an editor, and that can commit to one of the two supported view layers, Angular or React. It does not fit a team looking for a finished whiteboard tool, because the framework ships no application, only a foundation, and the Drawnix and PingCode Wiki examples are separate products built on top of it. Before you build on it, check the published version of @plait/core against the release tags, because the newest tag listed here is v0.64.6 from 2024-08-08 while the last push to the develop branch was on 2026-09-23, and check that the plugin set you need, such as @plait/mind or @plait/flow, is published at a matching version.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. worktile/plait on GitHub