Rich text element

Information

Folder: src/components/rte

Files

Schema

// src/components/rte/schema.json

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "required": [
    "html"
  ],
  "properties": {
    "html": {
      "type": "string"
    }
  }
}

Mocks

// src/components/rte/mocks.json

{
  "html": "<h2>Introduction</h2><p><em>miyagi</em> is a component development tool for JavaScript templating engines.</p><h3>Benefits</h3><ul><li>No overhead in your project by running _miyagi_ without a configuration file.</li><li>Works with any folder structure.</li><li>Helps you developing your components encapsulated.</li><li>Validates your components for HTML and accessibility violations.</li><li>Mock data (static or dynamic) allows developing independently from a backend.</li><li>Validates your mock data against your JSON schema.</li><li>Documentation of your components using markdown.</li><li>The layout is customizable, so it fits to your project.</li><li>Supports lots of template engines by using <a href=\"https://github.com/tj/consolidate.js\" target=\"_blank\" rel=\"noopener\">consolidate.js</a> internally.</li><li>Allows creating a static build.</li><li>Lets you create components via CLI.</li></ul>"
}

Template

// src/components/rte/index.hbs

<div class="Rte">
  {{{html}}}
</div>

Variants

default

Open

default mock data

{
  "html": "<h2>Introduction</h2><p><em>miyagi</em> is a component development tool for JavaScript templating engines.</p><h3>Benefits</h3><ul><li>No overhead in your project by running _miyagi_ without a configuration file.</li><li>Works with any folder structure.</li><li>Helps you developing your components encapsulated.</li><li>Validates your components for HTML and accessibility violations.</li><li>Mock data (static or dynamic) allows developing independently from a backend.</li><li>Validates your mock data against your JSON schema.</li><li>Documentation of your components using markdown.</li><li>The layout is customizable, so it fits to your project.</li><li>Supports lots of template engines by using <a href=\"https://github.com/tj/consolidate.js\" target=\"_blank\" rel=\"noopener\">consolidate.js</a> internally.</li><li>Allows creating a static build.</li><li>Lets you create components via CLI.</li></ul>"
}

Introduction

miyagi is a component development tool for JavaScript templating engines.

Benefits

No overhead in your project by running _miyagi_ without a configuration file.
Works with any folder structure.
Helps you developing your components encapsulated.
Validates your components for HTML and accessibility violations.
Mock data (static or dynamic) allows developing independently from a backend.
Validates your mock data against your JSON schema.
Documentation of your components using markdown.
The layout is customizable, so it fits to your project.
Supports lots of template engines by using consolidate.js internally.
Allows creating a static build.
Lets you create components via CLI.