What does License.value do and why must it come first?

License.value loads the license data before any yFiles API usage to ensure compliant behavior and prevent licensing errors.

Where can I find the complete HTML and TypeScript templates?

Templates are available in references/examples.md as the complete file templates for demos.

How do I test a newly scaffolded demo?

Run npm start and open the demo URL (e.g., http://localhost:4242/demos-ts/your-demo/) to verify it works.

Yfiles Init

Scanned

npx machina-cli add skill yWorks/yfiles-for-html-claude-plugin/yfiles-init --openclaw

Files (1)

SKILL.md

2.6 KB

Initialize a yFiles Application

Create a complete yFiles application following package conventions.

Quick Start

/yfiles-init [demo-name]

Creates in the current directory if no name is specified.

Setup Checklist

- [ ] Verify GraphComponent API with yFiles MCP
- [ ] Create HTML entry point
- [ ] Create main TypeScript/JavaScript file
- [ ] Adjust import paths for license
- [ ] Configure ESLint with yFiles plugin (recommended)
- [ ] Test in browser

Implementation

Step 1: Verify APIs

Use the yFiles MCP server to confirm the current API:

yfiles:yfiles_get_symbol_details(name="GraphComponent")
yfiles:yfiles_list_members(name="GraphComponent", includeInherited=true)

Step 2: Create files

Essential pattern:

import { GraphComponent, GraphEditorInputMode, License } from '@yfiles/yfiles'
import licenseData from '../../lib/license.json'

License.value = licenseData  // MUST come first

const graphComponent = new GraphComponent('#graphComponent')
graphComponent.inputMode = new GraphEditorInputMode()

See references/examples.md for complete file templates.

Step 3: Adjust import paths

License path depends on demo location:

demos-ts/category/demo/ → ../../../lib/license.json
Adjust ../ depth to match directory nesting

Step 4: Configure ESLint (Recommended)

The official @yfiles/eslint-plugin helps catch common mistakes and ensures yFiles 3.0 best practices:

npm i -D eslint typescript typescript-eslint @yfiles/eslint-plugin

See reference.md for complete ESLint configuration.

Step 5: Test

npm start
# Navigate to http://localhost:4242/demos-ts/your-demo/

Key Rules

License first: Call License.value = licenseData before any other yFiles API
CSS selectors: Use new GraphComponent('#id') or pass a DOM element
Graph access: graphComponent.graph
Set defaults before creating nodes: Configure graph.nodeDefaults.style before createNode()

Additional Resources

references/examples.md — Complete HTML and TypeScript file templates
references/reference.md — API patterns, GraphComponent options, input mode configuration

Source

git clone https://github.com/yWorks/yfiles-for-html-claude-plugin/blob/main/skills/yfiles-init/SKILL.mdView on GitHub

Overview

This skill scaffolds a complete yFiles application following package conventions and creates a ready-to-run demo. It helps you initialize a new project, set up GraphComponent, and configure the license before use. It also provides templates, an HTML entry point, and a test-ready workflow.

How This Skill Works

It first verifies the GraphComponent API via yFiles MCP, then generates essential files (HTML entry, main TS/JS, and license wiring). It adjusts import paths based on location, optionally adds ESLint configuration, and guides you to run npm start to test the demo.

When to Use It

When you want to start a new yFiles demo or project from scratch
When you need to scaffold a demo with a GraphComponent setup
When you must configure License.value before using yFiles APIs
When you want standard file templates and a runnable entry point
When you need guidance and templates for a quick yFiles startup

Quick Start

Step 1: /yfiles-init [demo-name]
Step 2: If no name is provided, it creates in the current directory
Step 3: See references/examples.md for complete file templates

Best Practices

Verify GraphComponent API with yFiles MCP before coding
Call License.value = licenseData before any other yFiles API
Create an HTML entry point and a main TypeScript/JavaScript file
Adjust import paths for license depending on demo location
Configure ESLint with @yfiles/eslint-plugin and test locally

Example Use Cases

Initializing a new 'my-demo' project in a fresh directory with a proper HTML entry and license setup
Setting up GraphComponent with GraphEditorInputMode in the demo startup code
Placing License.value assignment at the very top of initialization
Using references/examples.md templates to populate HTML/TS files
Running npm start and navigating to http://localhost:4242/demos-ts/your-demo/

Frequently Asked Questions

Add this skill to your agents