Quick Start

One file. 30 seconds. No install.

1. Create index.html

Copy this entire file. That's the whole app.

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>

<script type="application/ld+json">
{
  "@context": { "title": "http://purl.org/dc/terms/title",
                "item": "http://schema.org/hasPart",
                "name": "http://schema.org/name" },
  "@id": "#this",
  "@type": "List",
  "title": "Shopping List",
  "item": [
    { "@id": "#1", "name": "Milk" },
    { "@id": "#2", "name": "Bread" },
    { "@id": "#3", "name": "Eggs" }
  ]
}
</script>

<div id="app"></div>

<script type="module">
import { createStore } from 'https://losos.org/losos/store.js'
import { html, render, keyed } from 'https://losos.org/losos/html.js'

var dataEl = document.querySelector('script[type="application/ld+json"]')
var data = JSON.parse(dataEl.textContent)
var store = createStore(data, { debounce: 500 })
var root = store.get('#this')
var app = document.getElementById('app')

function renderApp() {
  var items = store.propAll(root, 'item')
  render(app, html`
    <h1>${data.title}</h1>
    <input placeholder="Add item..." onkeydown="${function(e) {
      if (e.key !== 'Enter' || !e.target.value.trim()) return
      store.push(root, 'item', {
        '@id': '#' + Date.now(),
        'name': e.target.value.trim()
      })
      e.target.value = ''
    }}" />
    <ul>
      ${keyed(items, function(i) { return i['@id'] }, function(i) {
        return html`<li>
          ${i.name}
          <button onclick="${function() {
            store.remove(root, 'item', function(x) { return x === i })
          }}">x</button>
        </li>`
      })}
    </ul>
    <p>${items.length} item${items.length === 1 ? '' : 's'}</p>
  `)
}

store.onChange(renderApp)
renderApp()
</script>

</body>
</html>

2. Open it

npx serve .
# or
python3 -m http.server

Open localhost:3000. Add items, delete items. It's reactive.

That's it

You just built a reactive app with:

No npm. No build. No dependencies. One HTML file.

What to add next

Want to...Add this
Save to a servercreateStore(data, { url: 'https://...', debounce: 800 })
Add authentication<script src="https://unpkg.com/xlogin">
Use pane tabsMove code to panes/my-pane.js, add shell.js
Live sync across devicesServer with Updates-Via WebSocket header
Fetch from an APITransform API data to JSON-LD, boot shell after fetch

See Getting Started for the full file-structure setup, or jump to Examples to see complete apps.