Installation

Access

@codecanon/waraq is a protected package on the npm registry. Only authorized users can install it.

To get access, contact us to purchase a license. Once confirmed, your npm account will be added to the allowed list and you will be able to install the package.

Requirements

React 19.2+
Tailwind CSS 4

Install

bun add @codecanon/waraq

Import the stylesheet

Import the Waraq stylesheet once, at your app root (e.g. app/layout.tsx or main.tsx).

import "@codecanon/waraq/styles.css"

If you are using Tailwind CSS 4 with @import "tailwindcss", place the Waraq import after your own Tailwind import so its utility classes take precedence when needed:

global.css

@import "tailwindcss";
@import "@codecanon/waraq/styles.css";

Entry points

The package ships three tree-shakable entry points:

Import	Use for
`@codecanon/waraq`	Editor layout components, action components, hooks, default layer types
`@codecanon/waraq/ui`	Standalone UI primitives (Button, ColorPicker, InputNumber, …)
`@codecanon/waraq/lib`	Type definitions, constants, utility functions

You only pay for what you import. If you only need the UI primitives you can import from /ui without pulling in the editor internals.

Next.js

No extra configuration is needed. The package is ESM-only and Next.js handles it automatically.

If you hit a Cannot use import statement in a module error for a transitive dependency, add it to transpilePackages in next.config.mjs:

next.config.mjs

const config = {
  transpilePackages: ["@codecanon/waraq"],
}