fix #220 - feat: Add a non-React host example for the Diagram Editor by fantonangeli · Pull Request #288 · open-workflow-specification/editor

fantonangeli · 2026-07-30T09:11:33Z

Closes #220

Description

Add an example showing how to use @openworkflowspec/diagram-editor from a non-React framework host application embedding the DE as a Web Component

How to test:

From the repository root:

pnpm install
pnpm --filter @openworkflowspec/vanilla-web-component-example start

Browse http://localhost:6007

Preview:

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

netlify · 2026-07-30T09:11:41Z

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	`92526f0`
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6a6b7a007988d700081eb171
😎 Deploy Preview	https://deploy-preview-288--openworkflow-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

fantonangeli · 2026-07-30T09:13:07Z

    "build:dev": "pnpm clean && tsc -p tsconfig.json && vite build",
    "build:prod": "pnpm lint && pnpm clean && tsc -p tsconfig.json && vite build && pnpm test && pnpm test-e2e",
-    "test": "vitest run --passWithNoTests",
+    "test": "vitest run",


This change is out of scope but we don't need --passWithNoTests anymore

fantonangeli · 2026-07-30T09:13:18Z

    "build:dev": "pnpm clean && tsc -p tsconfig.json && vite build",
    "build:prod": "pnpm run build:dev && pnpm test",
-    "test": "vitest run --passWithNoTests"
+    "test": "vitest run"


This change is out of scope but we don't need --passWithNoTests anymore

Copilot

Pull request overview

Adds a new “vanilla” (non-React host) example that embeds @openworkflowspec/diagram-editor via a Web Component, making it easier for non-React consumers to integrate the Diagram Editor while keeping React encapsulated behind a Custom Element API.

Changes:

Adds a new examples/vanilla-web-component workspace package with Vite dev server, unit tests (Vitest), and e2e tests (Playwright).
Updates the pnpm workspace to include examples/* and updates the lockfile accordingly.
Tightens test scripts in existing packages by removing --passWithNoTests.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds `examples/*` to the pnpm workspace so examples are first-class workspaces.
pnpm-lock.yaml	Records the new example importer and its dependencies.
packages/open-workflow-diagram-editor/package.json	Changes `test` script to fail when no tests are found.
packages/i18n/package.json	Changes `test` script to fail when no tests are found.
examples/vanilla-web-component/package.json	Defines the new example package scripts, deps, and tooling.
examples/vanilla-web-component/index.html	Adds the demo host page that embeds the custom element and loads sample content.
examples/vanilla-web-component/src/index.ts	Registers the custom element and imports required editor styles.
examples/vanilla-web-component/src/diagram-editor-element.ts	Implements the Custom Element wrapper that mounts/unmounts a React root and renders `DiagramEditor`.
examples/vanilla-web-component/src/sample-workflow.ts	Provides sample Serverless Workflow YAML used by the demo/e2e checks.
examples/vanilla-web-component/vite.config.ts	Configures Vite dev server (port 6007) and build behavior for the example.
examples/vanilla-web-component/vitest.config.ts	Configures Vitest (jsdom, globals, css, include patterns).
examples/vanilla-web-component/playwright.config.ts	Configures Playwright e2e execution against the Vite dev server.
examples/vanilla-web-component/tests/diagram-editor-element.test.ts	Adds unit tests validating element registration and prop wiring.
examples/vanilla-web-component/tests-e2e/diagram-editor.spec.ts	Adds an e2e smoke test validating the editor renders and shows nodes.
examples/vanilla-web-component/tsconfig.json	Adds TS config for the example package.
examples/vanilla-web-component/README.md	Documents usage, attributes, and styling requirements of the example.
examples/vanilla-web-component/.oxlintrc.json	Inherits repo lint configuration for the example package.
examples/vanilla-web-component/.oxfmtrc.json	Inherits repo formatting configuration for the example package.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot

Pull request overview

Copilot reviewed 17 out of 18 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (2)

examples/vanilla-web-component/README.md:46

The README’s attributes table lists no default for locale, but the web component implementation falls back to "en" when the attribute is omitted. This is a documentation mismatch that can confuse consumers of the example.

| `locale`             | `string`                        | -          | Language locale for the editor UI                        |

examples/vanilla-web-component/index.html:32

CSS property indentation is inconsistent here (the text-align line is over-indented compared to the rest of the h1 rules), which looks like an accidental formatting error and makes the example harder to read.

      h1 {
        margin: 16px;
        font-size: 1.25rem;
        font-weight: 600;
          text-align: center;
      }

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot

Pull request overview

Copilot reviewed 17 out of 18 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

lornakelly · 2026-07-30T14:37:48Z

+      content: this._content,
+      locale: this.getAttribute("locale") ?? "en",
+      isReadOnly: this.hasAttribute("read-only"),
+      colorMode: (this.getAttribute("color-mode") as ColorMode) ?? "system",


I think getAttribute returns a string if "" or an unknown value is passed "unknown", both of these means "system" wont get hit as it will either return "" or "unknown" which is not null

@lornakelly +1 with your point, but thinking a bit I feel like this is more a responsability of the DE, I think in:

editor/packages/open-workflow-diagram-editor/src/hooks/useResolvedColorMode.ts

Line 31 in ccc628d

colorMode === "system" ? getSystemColorMode() : colorMode,

This way any wrapper is validated and we don't duplicate the ColorMode values in the Web Component wrapper.
Wdyt?

lornakelly · 2026-07-30T14:40:42Z

+  }
+
+  private render(): void {
+    if (!this._root) return;


good to have an additional check here if content is "", in workflowSdk.ts we use text.trim() so can do the same here

if (!this._root || this._content.trim() === "") return;

This way the host app will not be able to empty the WF, but only replace with a new one.
Is that ok?

cheryl7114

agree with Lorna's comment of the README, other than that looks good

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

…a-non-React-host-example-for-the-Diagram-Editor Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (1)

packages/open-workflow-diagram-editor/README.md:34

The README link to the example is a repo-relative path (../../examples/...). That works on GitHub but will be broken for consumers reading the package README on npm (the published package won’t include the repo’s examples/ folder). Prefer an absolute GitHub URL (or a full URL to the docs site) so the reference works everywhere.

If your application doesn't use React, you can embed the editor as a Web Component.  
See the [vanilla Web Component example](../../examples/vanilla-web-component/) for a working setup.

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (1)

packages/open-workflow-diagram-editor/README.md:34

The README links to the example via a relative path (../../examples/...). Since this package publishes only dist, README.md, and LICENSE (see files in package.json), that relative link will be broken on npm/unpkg. Use an absolute GitHub URL so the reference works for consumers reading the published README.

If your application doesn't use React, you can embed the editor as a Web Component.  
See the [vanilla Web Component example](../../examples/vanilla-web-component/) for a working setup.

Copilot

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (1)

packages/open-workflow-diagram-editor/README.md:34

The README link to the vanilla Web Component example is a monorepo-relative path. That works when browsing the repo on GitHub, but it will be broken for consumers reading the published package README (e.g. on npm). Consider linking to the GitHub URL instead so the example is discoverable outside the monorepo checkout.

If your application doesn't use React, you can embed the editor as a Web Component.  
See the [vanilla Web Component example](../../examples/vanilla-web-component/) for a working setup.

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

fantonangeli added 2 commits July 29, 2026 18:09

Vanilla Web Component Example creation

10ec8d7

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Fnalized configuration

e200366

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI review requested due to automatic review settings July 30, 2026 09:11

Copilot started reviewing on behalf of fantonangeli July 30, 2026 09:12 View session

fantonangeli commented Jul 30, 2026

View reviewed changes

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Comment thread examples/vanilla-web-component/src/index.ts Outdated

Comment thread examples/vanilla-web-component/src/diagram-editor-element.ts

Comment thread examples/vanilla-web-component/README.md

Comment thread examples/vanilla-web-component/tests/diagram-editor-element.test.ts

fantonangeli added 3 commits July 30, 2026 11:38

Fixes comment: open-workflow-specification#288 (comment)

3d696d0

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Add re-rendering tests

b61e07c

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Fixes comment: open-workflow-specification#288 (comment)

c5f43c1

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI review requested due to automatic review settings July 30, 2026 11:27

Copilot started reviewing on behalf of fantonangeli July 30, 2026 11:27 View session

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Fix indentation

ccc628d

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI review requested due to automatic review settings July 30, 2026 12:16

Copilot started reviewing on behalf of fantonangeli July 30, 2026 12:16 View session

fantonangeli requested review from cheryl7114, handreyrc, kumaradityaraj and lornakelly July 30, 2026 12:17

Copilot AI reviewed Jul 30, 2026

View reviewed changes

lornakelly reviewed Jul 30, 2026

View reviewed changes

cheryl7114 approved these changes Jul 30, 2026

View reviewed changes

Fixes comment: open-workflow-specification#288 (comment)

ff20282

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI review requested due to automatic review settings July 30, 2026 16:06

Copilot started reviewing on behalf of fantonangeli July 30, 2026 16:07 View session

Merge remote-tracking branch 'upstream/main' into issue-220-feat-Add-…

76f28c8

…a-non-React-host-example-for-the-Diagram-Editor Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings July 30, 2026 16:09

Copilot started reviewing on behalf of fantonangeli July 30, 2026 16:10 View session

Fix lockfile

3f25976

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings July 30, 2026 16:13

Copilot started reviewing on behalf of fantonangeli July 30, 2026 16:14 View session

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Fixes comment: open-workflow-specification#288 (review)

92526f0

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Copilot AI review requested due to automatic review settings July 30, 2026 16:21

Copilot started reviewing on behalf of fantonangeli July 30, 2026 16:21 View session

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Uh oh!

Conversation

fantonangeli commented Jul 30, 2026

Description

How to test:

Preview:

Uh oh!

netlify Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for openworkflow-editor ready!

Uh oh!

fantonangeli Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

lornakelly Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cheryl7114 left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify Bot commented Jul 30, 2026 •

edited

Loading