Overview

Canvas Workbench (working name) is planned to be a local developer tool, similar to Storybook, but focused on Drupal Canvas Code Components and Canvas pages.

Goal

Provide a complete local Drupal Canvas preview experience for Code Components and Canvas Pages built with Code Components from source code alone.

What we are testing

This issue is to explore the followings, implement and learn as much as we can, and plan next steps.

  • Run a local Vite + React app that scans your local codebase.
  • Discover Drupal Canvas Code Components automatically.
  • Show discovered components in a UI.
  • Read component inputs from each component.yml and let you preview them through different example values.
  • Discover Canvas pages alongside components.
  • Represent pages as json-render objects.
  • Use json-render to preview Canvas pages locally.
  • Support hot module reload (HMR) for both component and page previews.
  • Explore an additional story metadata format, possibly compatible with Storybook.
  • Explore integrating Canvas page json-render objects with popular React framework routing.

Issue fork canvas-3573867

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

balintbrews created an issue. See original summary.

balintbrews opened merge request !611

wotnak made their first commit to this issue’s fork.

  • balintbrews committed 3a25554b on 1.x 
    feat: #3573867 Prototype Canvas Workbench

By: balintbrews
By: wotnak
balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: balintbrews » Unassigned
Category: Plan » Feature request
Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

effulgentsia’s picture

effulgentsia commented
Parent issue: » #3575872: [META] Enable Canvas Pages to be viewed and edited in an IDE: "Canvas Workbench"

Awesome work here! Retroactively organizing this under #3575872: [META] Enable Canvas Pages to be viewed and edited in an IDE: "Canvas Workbench".

catch’s picture

catch
he/him
Primary language English
commented

Please keep in mind the namespace conflict with https://www.drupal.org/project/workbench

penyaskito’s picture

penyaskito
he/him
Primary language Spanish
Location 🧑🏽‍🌾 Seville 💃 Andalusia, UTC+2 🇪🇺
commented

@catch Are your worries about using the same term? There's technically no namespace conflict, this is an npm package named @drupal-canvas/workbench

catch’s picture

catch
he/him
Primary language English
commented

@penyaskito yeah just that people will get confused and think it's 'Canvas workbench integration' which I thought 'surely not' when I saw the issue title, but had to click through to check.

effulgentsia’s picture

effulgentsia commented
Related issues: +#3576829: Decide if Canvas Workbench is the final name

I opened #3576829: Decide if Canvas Workbench is the final name to discuss the name.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.