Modern JavaScript frameworks like React JS and Vue JS have popularized the functional programming paradigm and declarative approaches to web app development. While these frameworks have made creating dynamic web applications more accessible, it's worth exploring the potential of web components in this landscape. Lit elements, with its minimalistic and declarative approach, stands out as an appealing base for leveraging web components in modern web and app development.
Dim does not ship a router package. Production-style demos (Shopping, Messaging) compose useStore, a navigation stack, and transitionId into a multi-screen experience. This tutorial extracts that pattern so you can reuse it.
useRef holds a mutable value that persists across renders without triggering re-renders when updated. In Dim it also powers cross-component DOM access via getRef.
Mixed applications can host Dim web components alongside React trees. The useDimStore hook lets React components read and write the same encrypted IndexedDB keys that Dim’s useStore uses — without mounting a custom element.
I'm working on creating something I can call "functional web components".
I'm working on creating something I can call "functional web components".
I'm working on creating something I can call "functional web components".
Building on the functional web components framework we created in previous guides, this article explores how to add file storage capabilities to your dim-based applications. We'll introduce the useFS hook, which provides a unified interface for file system operations using modern web APIs.
Dim includes a view transition system for sliding between UI states. The exported hook is useViewTransition (Storybook may label the section useTransition() — they refer to the same API).
Slide transitions move entire screens. Shared-element transitions morph a specific element from its old position to its new one using a FLIP (First, Last, Invert, Play) overlay — similar to native mobile navigation.
The useStore hook persists state to IndexedDB and syncs across components and browser tabs. This guide covers loading tuples and opt-in encryption in the current Dim framework.
Dim components receive data from the parent as HTML attributes, the .props property, and light-DOM children. Understanding which channel to use prevents silent bugs and security issues.