Create Webr Vite Lit

screenshot of Create Webr Vite Lit
vite

webr + lit + vite npm template

Overview:

This product is a npm template called "webr + lit + vite" that can be used to quickly start a new WebR project. It comes with several key features including WebR, r.js, Pyodide, Lit components, action-button.js, ojs-plot.js, status-message.js, Vite build system, and a light/dark mode CSS design system.

Features:

  • WebR: A quick way to start a new WebR project.
  • r.js: Comes with a preloaded r.js with more functionality on the way.
  • Pyodide: An uninitialized Pyodide package that is available if needed.
  • Lit components: Offers three basic components with more coming soon.
  • action-button.js: A simple button that performs an action when pressed.
  • ojs-plot.js: A generic Observable Plot component.
  • status-message.js: Enhances the "WebR: Loading.../Loaded" message.
  • Vite: A fast build system.
  • Light/Dark mode CSS: Includes a CSS design system based on Bonsai with both light and dark mode options.

Summary:

The "webr + lit + vite" npm template provides a quick and easy way to start a new WebR project. It incorporates the WebR framework, r.js, Pyodide, Lit components, and offers additional features such as action buttons, Observable Plot components, and enhanced status messages. The template also includes the Vite build system for fast and efficient development. Additionally, it provides a light/dark mode CSS design system based on Bonsai. Overall, this template is a useful tool for developers looking to kickstart their web development projects using WebR.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.