Schnellstart

Component-Entwicklung für Webmate Studio in wenigen Minuten.

Installation

npm install -g @webmate-studio/cli

# Verify
wm --version

Projekt initialisieren

wm init my-components
cd my-components

Erstellt:

my-components/
├── components/
│   ├── ExampleSimple/
│   └── ExampleExtended/
├── tokens/tokens.css
├── styles/base.css
└── wm.config.js

Mit CMS verbinden

wm login

Authentifiziert und lädt Design Tokens vom CMS.

Component erstellen

wm generate

Interaktiver Wizard erstellt:

components/
└── Hero/
    ├── component.html      # HTML Template
    └── islands/            # Optional: JavaScript
        └── hero.js

HTML Template

component.html:

<div class="p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-2xl font-bold mb-4">{{title}}</h2>
  <p class="text-gray-600">{{description}}</p>

  <div wm:if="showButton">
    <button class="px-6 py-3 bg-primary text-white rounded-lg">
      {{buttonText}}
    </button>
  </div>
</div>

Island hinzufügen (optional)

Für Interaktivität:

islands/hero.js:

export default class HeroIsland {
  constructor(element, props = {}) {
    this.element = element;
    this.count = 0;
    this.init();
  }

  init() {
    this.element.innerHTML = `
      <button class="px-6 py-3 bg-primary text-white rounded-lg">
        Clicked: ${this.count}
      </button>
    `;

    this.element.querySelector('button').addEventListener('click', () => {
      this.count++;
      this.element.querySelector('button').textContent = `Clicked: ${this.count}`;
    });
  }

  destroy() {
    // Cleanup
  }
}

component.html:

<div class="p-6 bg-white rounded-lg">
  <h2 class="text-2xl font-bold mb-4">{{title}}</h2>

  <div data-island="hero" data-island-props='{"title": "{{title}}"}'>
    <!-- Island rendert hier -->
  </div>
</div>

Development Server

wm dev

Features:

• Hot Module Reload - Änderungen sofort sichtbar
• Tailwind CSS v4 - Alle Utility Classes verfügbar
• Design Tokens - Automatisch vom CMS geladen

Öffnet localhost:5173

Zum CMS hochladen

wm login      # Einmalig
wm push       # Upload + Versionierung

Nächste Schritte

• CLI Referenz - Alle Befehle
• Component Basics - Struktur & Workflow
• Props - Dynamische Daten
• Conditionals - Bedingte Anzeige mit wm:if
• Loops - Listen mit wm:for
• Design Tokens - CMS-Farben nutzen
• Islands - JavaScript-Interaktivität