A starter template for projects that doesn't make you worry about maintaining dependencies and frameworks on the long run. It uses modern JavaScript features and Web Components. Each component or functionality is a separate file that can be imported if needed or commented out if not. All external dependencies are included from CDN links.
- Tweakpane for GUI controls
- PrismJS for code highlighting
- md-block for importing and rendering markdown files on the client side using web components
- Basic custom Reactive State Management Using Proxy, storing values in Local storage and two-way data-binding with Tweakpane
- Automatic light/dark mode based on system preferences
- Tailwind Play CDN for styling
- Web components for modularity
- A fork of code-sandbox web component from Chris Ferdinandi for displaying an interactive code sandbox for html, css and javascript, similar to what CodePen does. My fork adds the possibility to fetch a file from a URL and run it in the sandbox, by just adding an attribute
src="css/component.css"to the web component. My idea is to use this to keep the code snippets in a separate file and include them on page load. This way, the code snippets can be updated without changing the main page. I've also added anameattribute to the web component, which makes only one editor open at the time, leveraging the<details>element behavior. Below is a table of the new attributes.
| Attribute | Description |
|---|---|
console |
If present displays the console (Optional) |
hidden |
Used to prevent flashes of unstyled content |
name |
The name attribute to be attached to the <details> elements, which makes only one open at the time (Optional) |
result |
Controls what is displayed on the right side panel, can either be iframe or console. Defaults to iframe |
src |
The URL of the file to fetch and run in the sandbox. Can be on the same origin or a remote file (Optional) |
title |
The title of the code block, defaults to Code sandbox. (Optional) |
This starter template is meant to leverage native ES modules imports and web components. Therefore it is possible to start working without any build tools.
However, if you need to use build tools, add npm-installed dependencies, add hot-reloading, etc, Vite is the recommended build tool.
Install Vite
npm install -D viteRun Vite
npx vite