Nebula

Nebula provides a template repository for @drupal-canvas/create to scaffold a new codebase for working with Drupal Canvas Code Components. The codebase serves as a development environment fully set up with tooling and examples for AI-assisted development workflows.

Getting started

Instead of cloning this repository, create a new project interactively:

npx @drupal-canvas/create@latest

AI-assisted development workflows

Different AI tools have different configuration files. To apply the provided AI instructions to your AI agent use:

npx ruler apply --agents=<agent1,agent2,...>

For example, npx ruler apply --agents=cursor or npx ruler apply --agents=claude.
For complete list of supported agents, see: https://github.com/intellectronica/ruler#supported-ai-agents.

Features

• @drupal-canvas/create installed
  • .env.example file with instructions specific to this codebase
• @drupal-canvas/eslint-config configured
  • Recommended rules are added on top of the required validation for the components to work in Drupal Canvas
• Storybook for developing and presenting the components
  • Viewports configured to match the viewport sizes Drupal Canvas uses
• Compiling with SWC through @vitejs/plugin-react-swc (Drupal Canvas uses @swc/wasm-web)
• Tailwind CSS v4 for styling
• Prettier with plugins configured
  • prettier-plugin-tailwindcss
  • @ianvs/prettier-plugin-sort-imports
• Pre-commit hook with Husky for linting and formatting staged files using lint-staged
• GitHub Actions workflows:
  • Static code checks
  • Validating PR titles against the Conventional Commits specification (delete .github/workflows/lint-pr.yml if you don't want this)
• Example components

Commands

Command	Description
npx ruler [command] [options]	Runs Ruler CLI commands
npx canvas [command] [options]	Runs Drupal Canvas CLI commands (npx canvas lists available commands)
npm run dev	Starts Storybook's development server
npm run storybook	Alias for dev command
npm run build-storybook	Creates a static Storybook build
npm run code:check	Runs all code checks
npm run code:check:prettier	Checks code formatting with Prettier
npm run code:check:eslint	Checks code with ESLint
npm run code:fix	Runs all code fixes
npm run code:fix:prettier	Fixes code formatting with Prettier
npm run code:fix:eslint	Fixes code with ESLint