Simple and intuitive behaviour
Platelet uses a small superset of JSON for expressions and HTML attributes for rendering.
<img ^src='article.img_url'>
<div>
<h2>
<a ^href='article.link'>{{title}}</a>
</h2>
<div pl-html='summary'></div>
<date>{{date}}</date>
</div>Works with existing HTML tools
Platelet uses HTML attributes for its syntax - so you can bring your own formatter and tooling.
<ul pl-if="list">
<li pl-for="item in list">
{{ item }}
</li>
</ul>
<p pl-else>no items</p>Break templates into small Components
Support for named slots & importing templates out of the box.
<template
pl-src="button.html"
^action='"/submit/" + uuid'>
<b>Approve<b> changes
</template>
<!-- button.html -->
<button ^formaction='action'>
<slot pl-slot></slot>
</button>
Works great with htmx & Alpine.js
Combine platelet for server side rendering with htmx and/or Alpine.js for interactivity.
<tr pl-for='(contact, i) in contacts'
^hx-get='i > 9 && "/contacts/?page=" + next'
hx-trigger='revealed'
hx-swap='afterend'>
<td>{{ contract.name }}</td>
<td>{{ contract.email }}</td>
<td>{{ contract.id }}</td>
</tr>
<style> & <script> de-duplication
Identical scripts and stylesheets are combined so you can co-locate your components, styles and behaviour.
<template pl-for="input in inputs">
<textarea data-input></textarea>
<style>
textarea { border-color: green; }
</style>
<script>
document.querySelectorAll("[data-input]")
.forEach( /* ... */ )
</script>
</template>