Skip to content

SolidJSvsLit

Jump to bottom
Tim Janik edited this page Jul 19, 2025 · 1 revision

SolidJS vs. Lit Components for DAW UI

For Anklang, we expect to have lots of small updates at the GUI, but the number of components (Tracks, Clips) remains mostly stable throughput the runtime. We do however have some heavy canvas uses (PianoRoll, Spectrogram). It wasn't too easy to map these requirements onto Vue2/Vue3, which is why we moved to Lit. However for Lit we also have to bundle a Signals library to implement all needed updates and still see missing updates / complains about too many rerenders at the UI. Since we need Signals anyway, it makes sense to look into SolidJS as a UI solution as well. The following is the result of LLMs comparing the two under our requirements:

SolidJS excels in performance, fine-grained reactivity, and canvas integration, making it ideal for real-time DAW UIs. Lit Components prioritizes web standards and encapsulation but lacks the efficiency for frequent updates and complex state management required in DAW workflows.

Comparison Table with Pro/Con Emojis

Aspect SolidJS Lit Components
Applicability to DAW UI ✅ SolidJS aligns with real-time interactivity needs. ❌ Lit requires more manual updates and external libraries.
Performance (Small Updates) ✅ Fine-grained reactivity ensures efficient DOM updates. ❌ Component-level updates may re-render unnecessarily.
Canvas Integration ✅ createEffect simplifies partial canvas redraws (e.g., waveforms). ✅ Works via lifecycle methods, but less streamlined for dynamic updates.
State Management ✅ Built-in signals/stores handle global/local state seamlessly. ❌ Requires external libraries for app-wide state management.
Developer Experience ✅ JSX familiar to React developers; cohesive API. ❌ Tagged templates may feel unfamiliar to React teams.
Bundle Size ✅ ~7kB gzipped (minimal runtime). ✅ ~16kB gzipped (still lightweight).
Ecosystem ✅ Growing, unified framework tools. ✅ Strong web components ecosystem and interoperability.
Learning Curve ✅ Gentle for React developers. ✅ Easy for vanilla JS developers but less dynamic for complex DAW needs.
Long-Term Maintenance ✅ Compiled to vanilla JS; React-like structure simplifies onboarding. ✅ Web components are inherently future-proof but less framework-specific.
Community & Support ✅ Active community; newer but enthusiastic. ✅ Established Google-backed support and mature resources.
Testing ✅ First-party tools akin to React’s ecosystem. ✅ Standard JS tools apply but less framework-specific.
TypeScript Support ✅ Full type safety out-of-the-box. ✅ Good support but less framework-specific.
Interactivity ✅ Reactive primitives reduce boilerplate for real-time controls. ❌ Manual event handling increases complexity for dynamic interactions.
Component Model ✅ Flexible hooks-like API for modern, interactive components. ❌ Class-based decorators feel rigid for dynamic DAW needs.
Server-Side Rendering (SSR) ✅ Supports SSR via Solid Start. ✅ Possible but requires additional setup.
Mobile Support ✅ Optimized for resource-limited devices via fine-grained updates. ✅ Functional but performance depends on implementation.
Accessibility ⚠️ Manual effort required for ARIA attributes (no inherent advantage). ⚠️ Manual effort required for ARIA attributes (no inherent advantage).
Internationalization (i18n) ⚠️ Relies on external libraries (e.g., i18next). ⚠️ Relies on external libraries (e.g., i18next).
Animation ✅ Simplifies state-driven animations (e.g., meter movements). ❌ Requires manual management or external libraries.
Code Splitting ✅ Native support via dynamic imports. ✅ Possible with build tools but less integrated.
Error Handling ✅ Standard JS tools with error boundaries. ✅ Standard JS tools with encapsulation.
Debugging ✅ DevTools extension mimics React’s debugging experience. ❌ Relies on browser tools (less framework-specific).
Documentation ✅ Comprehensive but still expanding. ✅ Mature and extensive resources.
Use Case Fit ✅ Best for DAWs requiring frequent updates, canvas integration, and interactivity. ❌ Less optimized for DAW’s real-time needs due to coarser updates and state limitations.

Key Takeaways

  • SolidJS is highly recommended for DAW UIs due to fine-grained reactivity, built-in state management, and canvas efficiency.
  • Lit Components suits standards-driven projects with simpler interactivity needs but struggles with complex, real-time updates critical to DAWs.
  • Team familiarity matters: Choose SolidJS for React/JSX workflows and Lit for vanilla JS/web component expertise.

Clone this wiki locally