A demo app showing server-first web components with DSD, HTMX, and Islands.
MIT License
A demo leveraging common server rendering approaches to enable rendering web components on the server, rather than on the client. This approach enables encapsulating HTML and CSS for each view, declaratively applying common behaviors to views via HTMX, and leveraging browser standards to add custom JavaScript islands as needed to any part of the UI.
To learn more about Web Components, please consider purchasing my Web Component Engineering course. 13 modules, 170+ videos, and an interactive learning app guide you through DOM APIs, Web Components, modular CSS, accessibility, forms, design systems, tools, and more. Purchasing the course helps support my writing, web standards work, and open source.
For group discounts, please reach out to [email protected].
npm i
to install dependencies.npm run server
to run the web server.[!IMPORTANT] While this demo uses Node.js, Express, and Handlebars, nearly every major web server/framework today supports the concepts of views, partials, helpers, and request/execution context, that are used to make this approach to web development possible. As a result, pretty much everything shown here should translate in a straightforward way to other platforms like .NET, Ruby, Java, etc.
The data used in this demo was adapted from SWAPI.