Presto

#UseThePlatform

Presto is a bespoke, minimal UI runtime for web apps that tries to use the platform as much as possible. Presto builds on top of web component technologies such as custom elements, shadow DOM, <slot>, and more to create a reactive runtime with very fast UI updates that is easy to use without any build steps (unless you want build steps, in which it also provides full Vite support, with a meta-framework on the roadmap).

Example

import { createElement, createSignal, createMemo, html, z } from "presto"

// Runtime prop validation with Zod
const galleryProps = z.object({
    sculpture: z.object({
        name: z.string(),
        artist: z.string(),
        description: z.string(),
        url: z.string().url(),
        alt: z.string(),
    }),
})

const Gallery = createElement({
    props: galleryProps,
    setup: ({ props }) => {
        const [showMore, setShowMore] = createSignal(false)
        const color = createMemo(() => showMore() ? "red" : "blue")

        function toggleShowMore() {
            setShowMore(show => !show)
        }

        return () => html`
            <!-- Scoped styles re-render reactively, just like the template -->
            <style>
                button {
                    color: white;
                    background-color: ${color()};
                    font-family: sans-serif;
                }
            </style>
            <section>
                <h2>
                    <i>${props.sculpture.name}</i>
                    by ${props.sculpture.artist}
                </h2>
                <button @click=${toggleShowMore}>
                    ${show({ when: showMore, fallback: html`Show` }, () => html`Hide`)} details
                </button>
                ${show({ when: showMore }, () => html`<p>${props.sculpture.description}</p>`)}
                <img src="${props.sculpture.url}" alt="${props.sculpture.alt}" />
            </section>
        `
    },
})

customElements.define("app-gallery", Gallery)

TODO

UI Framework:

• Reactive primitives
• Client-side rendering
• Event handlers
• Global context
• Reactive scoped styles
• Children (<slot>)
• Client-side routing
• Parallel route loaders
• Lifecycle functions
• Reactive attributes
• Reactive properties
• Scoped context
• Synchronous context
• Nested routing
• Form actions
• Error boundaries
• Automatically wrap link handlers in reactive root
• Hot module reloading
• VS Code extension
• Unstyled components
• Suspense/asyncronous rendering

Meta-Framework:

• Astro support
• File system routing
• Server-side loaders & actions
• Server-side rendering (and pre-rendering)
• Runtime-agnostic deployment adapters
• Out-of-order streaming
• Partial hydration
• Progressive hydration
• Hybrid routing
• Hot data revalidation