ESP32 Sveltekit

screenshot of ESP32 Sveltekit
svelte
tailwind
daisyui

A simple and extensible framework for ESP32 based IoT projects with a feature-rich, beautiful, and responsive front-end build with Sveltekit, Tailwind CSS and DaisyUI. This is a project template to get you started in no time with a fully integrated build chain.

Overview:

The ESP32 SvelteKit is a simple and extensible framework for ESP32 based IoT projects. It includes a feature-rich, beautiful, and responsive front-end built with SvelteKit, TailwindCSS, and DaisyUI. This project template provides a starting point for building IoT projects with a powerful back-end service and an easy-to-use build chain. It is highly customizable and has a low memory footprint, making it ideal for constrained devices like the ESP32.

Features:

  • Beautiful UI powered by DaisyUI and TailwindCSS: The framework provides a beautiful and responsive UI that works well on both desktop and mobile devices. It includes gentle animations for a modern and snappy feeling. Theming is made easy with DaisyUI and media queries for light or dark themes.
  • Low Memory Footprint and Easy Customization by Courtesy of SvelteKit: SvelteKit is uniquely suited for serving from constrained devices like the ESP32. It has a low memory footprint and allows for easy customization of the front end. Developers can adapt and add functionality as needed.
  • Rich Communication Interfaces: The framework includes a rich set of communication interfaces, such as an MQTT client, HTTP RESTful API, and WebSocket server. These interfaces are stateful and fully synchronized, allowing changes to propagate to all participants. The states can also be persisted on the file system, and time synchronization with NTP is supported.
  • WiFi Provisioning and Management: ESP32 SvelteKit provides features for managing WiFi networks. It includes the ability to set up an access point for provisioning or as a fallback, scan for available networks, and connect to them. Advanced configuration options like static IP are also available.
  • Secured API and User Management: The framework allows for managing different users with two authorization levels: administrator and guest. API calls can be authenticated with a JWT token. User profiles can be managed from the admin interface, but it is important to note that the framework is not secure without TLS/SSL encryption on the ESP32 server.
  • OTA Upgrade Service: ESP32 SvelteKit supports over-the-air updates through three different channels: ArduinoOTA port for updates from the IDE, uploading a .bin file from the web interface, or pulling a firmware image from an update server.
svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.