Roadmap & Feature-set

Before we dive into Dioxus, feel free to take a look at our feature set and roadmap to see if what Dioxus can do today works for you.

If a feature that you need doesn't exist or you want to contribute to projects on the roadmap, feel free to get involved by joining the discord.

Generally, here's the status of each platform:

  • Web: Dioxus is a great choice for pure web-apps - especially for CRUD/complex apps. However, it does lack the ecosystem of React, so you might be missing a component library or some useful hook.

  • SSR: Dioxus is a great choice for pre-rendering, hydration, and rendering HTML on a web endpoint. Be warned - the VirtualDom is not (currently) Send + Sync.

  • Desktop: You can build very competent single-window desktop apps right now. However, multi-window apps require support from Dioxus core and are not ready.

  • Mobile: Mobile support is very young. You'll be figuring things out as you go and there are not many support crates for peripherals.

  • LiveView: LiveView support is very young. You'll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.

Features


FeatureStatusDescription
Conditional Renderingif/then to hide/show component
Map, Iteratormap/filter/reduce to produce rsx!
Keyed Componentsadvanced diffing with keys
Webrenderer for web browser
Desktop (webview)renderer for desktop
Shared State (Context)share state through the tree
Hooksmemory cells in components
SSRrender directly to string
Component Childrencx.children() as a list of nodes
Headless componentscomponents that don't return real elements
Fragmentsmultiple elements without a real root
Manual PropsManually pass in props with spread syntax
Controlled Inputsstateful wrappers around inputs
CSS/Inline Stylessyntax for inline styles/attribute groups
Custom elementsDefine new element primitives
Suspenseschedule future render from future/promise
Integrated error handlingGracefully handle errors with ? syntax
NodeRefgain direct access to nodes
Re-hydrationPre-render to HTML to speed up first contentful paint
Jank-Free RenderingLarge diffs are segmented across frames for silky-smooth transitions
EffectsRun effects after a component has been committed to render
Portals🛠Render nodes outside of the traditional tree structure
Cooperative Scheduling🛠Prioritize important events over non-important events
Server Components🛠Hybrid components for SPA and Server
Bundle Splitting👀Efficiently and asynchronously load the app
Lazy Components👀Dynamically load the new components as the page is loaded
1st class global stateredux/recoil/mobx on top of context
Runs nativelyruns as a portable binary w/o a runtime (Node)
Subtree Memoizationskip diffing static element subtrees
High-efficiency templates🛠rsx! calls are translated to templates on the DOM's side
Compile-time correctThrow errors on invalid template layouts
Heuristic Enginetrack component memory usage to minimize future allocations
Fine-grained reactivity👀Skip diffing for fine-grain updates
  • ✅ = implemented and working
  • 🛠 = actively being worked on
  • 👀 = not yet implemented or being worked on
  • ❓ = not sure if will or can implement

Roadmap

These Features are planned for the future of Dioxus:


Core

  • Release of Dioxus Core
  • Upgrade documentation to include more theory and be more comprehensive
  • Support for HTML-side templates for lightning-fast dom manipulation
  • Support for multiple renderers for same virtualdom (subtrees)
  • Support for ThreadSafe (Send + Sync)
  • Support for Portals

SSR

  • SSR Support + Hydration
  • Integrated suspense support for SSR

Desktop

  • Declarative window management
  • Templates for building/bundling
  • Fully native renderer
  • Access to Canvas/WebGL context natively

Mobile

  • Mobile standard library
    • GPS
    • Camera
    • filesystem
    • Biometrics
    • WiFi
    • Bluetooth
    • Notifications
    • Clipboard
  • Animations
  • Native Renderer

Bundling (CLI)

  • Translation from HTML into RSX
  • Dev server
  • Live reload
  • Translation from JSX into RSX
  • Hot module replacement
  • Code splitting
  • Asset macros
  • Css pipeline
  • Image pipeline

Essential hooks

  • Router
  • Global state management
  • Resize observer