WebZen Bridge

WebZen Bridge is a VS Code extension for WebZen and Titanium-style projects. It focuses on two things:

• keeping HTML-first styling fast
• making project structure easier to navigate from inside the editor

The extension works with projects that use build.js and src/pages/**/*.html, and it adds commands, CodeLens, diagnostics, highlights, and CSS editing helpers tailored to that workflow.

What It Does

Inline edit existing CSS classes

Place the cursor on a class name inside class="..." and run WebZen: Inline Edit Class.

WebZen Bridge temporarily moves that class into an editable multiline style attribute in the HTML file, tracks the source CSS file, and writes the result back on save.

Before:

<button class="btn-primary">Save</button>

After starting inline edit:

<button
  data-wz-editing="btn-primary"
  data-wz-source="src/assets/css/app.css"
  style="
    background: #2563eb;
    color: white;
    padding: 12px 16px;
  "
>
  Save
</button>

After saving, the HTML is restored and the CSS rule is updated.

.btn-primary {
  background: #2563eb;
  color: white;
  padding: 12px 16px;
}

Extract style="..." into a CSS class

Run WebZen: Extract to CSS Class on an element that has an inline style attribute. The extension asks for a class name, writes a CSS rule into the resolved CSS file, removes the inline style, and applies the new class.

Before:

<div style="display:flex; gap:16px; padding:20px; border:1px solid #ddd;">
  Content
</div>

After:

<div class="panel-row">
  Content
</div>

Generated CSS:

.panel-row {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid #ddd;
}

Convert declaration-style classes into generated wz-* classes

WebZen Bridge can detect declaration-like class content and convert it into generated CSS classes.

Before:

<div class="color:red; lg:background:blue; lg:hover:background:green;">
  Card
</div>

After:

<div class="wz-a1b2c3 wz-lg-d4e5f6 wz-lg-h-g7h8i9">
  Card
</div>

Generated CSS:

.wz-a1b2c3 {
  color: red;
  /* wz-debug: group=base | color:red */
}

@media (min-width: 992px) {
  .wz-lg-d4e5f6 {
    background: blue;
    /* wz-debug: group=lg | background:blue */
  }

  .wz-lg-h-g7h8i9:hover {
    background: green;
    /* wz-debug: group=lg-h | background:green */
  }
}

If the same media query already exists in the target CSS file, new responsive rules are appended to the existing @media block instead of creating a duplicate block.

Purge unused generated classes

Run WebZen: Purge Unused WZ Classes to remove unused wz-* rules from CSS files when generated utility classes are no longer referenced in HTML.

This is useful after refactors or after removing prototype declarations from templates.

Controller flow and navigation helpers

The extension adds controller-specific CodeLens and diagnostics for patterns such as:

"use view about/index.html";
"use route /about";

export function AboutController() {
  return {};
}

Available controller helpers include:

• opening the configured route URL in the browser
• opening the linked view file directly from the controller
• warnings for missing route or missing view pairs
• warnings for missing referenced view files
• warnings for duplicate route definitions

Route preview URLs use this priority order:

1. webzen.config.json → devServerUrl
2. VS Code setting webzen.devServerUrl
3. fallback http://localhost:3000

Example:

{
  "devServerUrl": "http://localhost:3000"
}

Component and structure navigation

WebZen Bridge also improves navigation inside WebZen HTML files with features such as:

• open component definition links
• tag highlights for wz-*, on-*, and core structural tags
• diagnostics around project structure and tag usage
• rename helpers for action references
• flow-oriented CodeLens in controller files

Commands

The extension currently contributes these commands:

• WebZen: Inline Edit Class
• WebZen: Cancel Inline Edit
• WebZen: Sync All Inline Edits
• WebZen: Extract to CSS Class
• WebZen: Purge Unused WZ Classes
• WebZen: Rename Action References
• WebZen: Open Component Definition
• WebZen: Open Controller Route URL
• WebZen: Open Controller View File

Keybindings

• Ctrl+Shift+I on Windows/Linux or Cmd+Shift+I on macOS: start inline editing for the class under the cursor
• Escape: cancel an active inline edit session in HTML files

Settings

General

webzen.debugWzMapping

When enabled, generated wz-* CSS rules include debug comments that preserve the original declaration grouping.

Example:

.wz-x1y2z3 {
  color: red;
  /* wz-debug: group=base | color:red */
}

webzen.devServerUrl

Fallback base URL for controller route links when webzen.config.json does not define devServerUrl.

Highlight customization

You can tune the visual appearance of editor highlights with these setting groups:

• webzen.highlight.wz.*
• webzen.highlight.on.*
• webzen.highlight.core.*

These settings control values such as background, border, text color, radius, font weight, padding, and wrapper characters.

Typical Workflow

Styling workflow

1. Write HTML quickly.
2. Prototype with inline style="..." or declaration-style classes like lg:background:blue.
3. Convert styles into reusable CSS with Extract to CSS Class or generated wz-* rules.
4. Fine-tune real CSS classes with Inline Edit Class.
5. Purge unused generated rules when markup changes.

Controller workflow

1. Define route and view directives in controller files.
2. Use CodeLens to open the browser route or the linked view file.
3. Fix diagnostics when route/view pairs are incomplete or inconsistent.

Requirements

WebZen Bridge activates in workspaces that look like a WebZen project, including structures such as:

build.js
src/pages/**/*.html

For the best results, keep your project CSS under src/assets/css and your pages under src/pages.

Development

Inside the extension folder:

npm install
npm run compile

To watch TypeScript changes:

npm run watch

Publisher

Published as webzen-bridge by TProject.