JinnTap

Installation

From npm

npm install @jinntec/jinntap

The package ships as an ES module with the web component and its styles under dist/.

<head>
  <!-- Optional but recommended base styling -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

  <!-- JinnTap chrome; document styles load automatically from the schema `css` property -->
  <link rel="stylesheet" href="node_modules/@jinntec/jinntap/dist/jinn-tap.css" />

  <script type="module" src="node_modules/@jinntec/jinntap/dist/jinn-tap.es.js"></script>
</head>
<body>
  <jinn-tap></jinn-tap>
</body>

The built-in schemas declare a css path (relative to the schema file). When the component initialises it resolves that path against the schema URL (or against the library module for built-ins) and injects a <link rel="stylesheet">. Use no-schema-css if you prefer to load document styles yourself.

Optional: @jinntec/jinntap/storage adds IndexedDB autosave for browser-only hosts (demos, offline drafts). See Local document storage.

<script type="module" src="node_modules/@jinntec/jinntap/dist/storage.es.js"></script>

Once the module has loaded, the <jinn-tap> custom element is registered and any <jinn-tap> in the page becomes an editor.

Building from source

Node.js 20+ and npm 7+ are recommended.

git clone https://github.com/JinnElements/jinn-tap.git
cd jinn-tap
npm ci

npm run build        # build the library into dist/
npm run docs:dev     # work on the docs site locally
npm run build:site   # build the docs site into dist/

See the Usage page for a first document, or Customizing the editor / the Schema reference to tailor which elements the editor supports.