Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

jam-xxx

jam-do13MIT1.1.1TypeScript support: included

jam-x - HTML-extension for multiple purpose

jam-x, jam-tools, Symbiote.js, HTML, web components, custom elements, shadow dom, ui framework, widgets, SSG, JAMStack

readme

<jam-x>

Low-code approach fully compatible with the mature development practices

This site is built with jam-x

Simple and powerful extension set for the native HTML.

We believe that web development should be accessible for higher range of specialists, not for the experienced developers only. We trying to extend the most simple parts of the web platform to make it able to solve more tasks.

HTML as the low-code platform - is the main idea of <jam-x> library.

Quick start

The easiest way to try <jam-x> is to create a simple html file in your text editor and connect the <jam-x> base class from web:

Browser support

<jam-x> is supported and tested in all major modern desktop and mobile browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera
  • etc.

If you have questions or proposals - welcome to jam-x Discussions! ❤️

X-IMPORT

<x-import 
  src="./document.html" 
  data-src="./data.json">
</x-import>

X-MD

<x-md
  src="./doc.md" 
  data-src="./data.json">
</x-md>

X-DWA

<x-dwa 
  src="./document.html.js" 
  data-src="./data.json">
</x-dwa>

X-REPEAT

<x-repeat data-src="./data.json">
    <template>
      <ul>
        <li>{{item1}}</li>
        <li>{{item2}}</li>
        <li>{{item3}}</li>
      </ul>
    </template>
</x-repeat>

OR:

<template id="item-tpl">
  <ul>
    <li>{{item1}}</li>
    <li>{{item2}}</li>
    <li>{{item3}}</li>
  </ul>
</template>

<x-repeat data-src="./data.json" template-id="item-tpl"></x-repeat>

X-ROOT-STYLES

<x-repeat src="./styles.css.js"></x-repeat>