dioxus/examples
Jonathan Kelley 88af3e7eff
Hotreloading of for/if/body, formatted strings, literals, component props, nested rsx, light CLI rewrite, cli TUI (#2258)
Hotreload the contents of for loops, if chains, component bodies, props, attributes, and any literals discovered in rsx!
Add a TUI renderer to the CLI.
Improve the CLI build system to be async and parallel.
Refactor RSX to allow partial expansion of expressions.
Merge autofmt implementations for consistency.
Merge the representation of elements and components under the hood.
Add a diagnostics system for rsx for improved error messages.
Drop interprocess and move to websockets for communication between the CLI and the server.
Assign IDs to nodes and attributes in a stable way to be used in non compiler contexts.
Add hotreloading to any body of component/for loop/if chain/etc.

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
Co-authored-by: Liam Mitchell <liamkarlmitchell@gmail.com>
2024-07-17 19:11:18 -07:00
..
assets clippy, and don't hash invisible files for ts generation 2024-03-05 22:38:38 -08:00
mobile_demo update 0.4 doc links to 0.5 2024-03-27 20:42:07 -05:00
openid_connect_demo Update openid example (#2474) 2024-06-06 18:05:25 -07:00
PWA-example enable the web renderer in the PWA example 2024-05-28 14:06:27 -05:00
tailwind Fix Outdated README.md (#2147) 2024-03-26 19:17:02 -07:00
all_events.rs Make clippy happy on examples 2024-02-14 13:50:10 -08:00
backgrounded_futures.rs Update examples, add css 2024-02-14 12:33:07 -08:00
calculator.rs Check type of launch config (#2125) 2024-03-27 12:08:05 -07:00
calculator_mutable.rs Create closure type; allow async event handlers in props; allow short hand event handlers (#2437) 2024-06-10 18:47:07 -07:00
clock.rs Update examples, add css 2024-02-14 12:33:07 -08:00
control_focus.rs Update examples, add css 2024-02-14 12:33:07 -08:00
counters.rs Update examples, add css 2024-02-14 12:33:07 -08:00
crm.rs Update examples, add css 2024-02-14 12:33:07 -08:00
custom_assets.rs Update examples, add css 2024-02-14 12:33:07 -08:00
custom_html.rs Check type of launch config (#2125) 2024-03-27 12:08:05 -07:00
custom_menu.rs Create use_muda_event_handler hook (#2367) 2024-04-25 13:32:34 -04:00
disabled.rs Update examples, add css 2024-02-14 12:33:07 -08:00
dog_app.rs restore lifetime checking for signals 2024-03-08 10:32:57 -06:00
dynamic_asset.rs Update examples, add css 2024-02-14 12:33:07 -08:00
errors.rs Suspense boundaries/out of order streaming/anyhow like error handling (#2365) 2024-07-01 20:50:36 -07:00
eval.rs fix: typo (#2202) 2024-03-31 10:24:24 -05:00
file_explorer.rs cut out a number of changes from the hr PR (#2580) 2024-07-02 17:09:57 -07:00
file_upload.rs cut out a number of changes from the hr PR (#2580) 2024-07-02 17:09:57 -07:00
flat_router.rs Update examples, add css 2024-02-14 12:33:07 -08:00
form.rs Fix #2043: use formvalue instead of String for forms (#2103) 2024-03-18 18:21:08 -07:00
future.rs Fix error in examples/future.rs comments, use_futures inline docs comments, also added clarification that Signal<T>.read() and Singal<T>() are the same thing 2024-02-28 11:42:04 +08:00
generic_component.rs set up example scaping for docs.rs (#2450) 2024-05-28 13:05:55 -07:00
global.rs cut out a number of changes from the hr PR (#2580) 2024-07-02 17:09:57 -07:00
hash_fragment_state.rs Implement hash fragments in the router (#2320) 2024-04-25 14:30:25 -04:00
hello_world.rs Update examples, add css 2024-02-14 12:33:07 -08:00
hydration.rs Make router work on web 2024-01-19 16:36:40 -08:00
image_generator_openai.rs clean up some examples, ensuring stuff works 2024-03-06 19:50:07 -08:00
link.rs set up example scaping for docs.rs (#2450) 2024-05-28 13:05:55 -07:00
login_form.rs set up example scaping for docs.rs (#2450) 2024-05-28 13:05:55 -07:00
memo_chain.rs set up example scaping for docs.rs (#2450) 2024-05-28 13:05:55 -07:00
meta.rs switch to a Document trait and introduce Script/Head/Style/Meta components (#2635) 2024-07-17 20:54:03 -05:00
multiwindow.rs Update examples, add css 2024-02-14 12:33:07 -08:00
nested_listeners.rs chore: fix some typos in comments (#2340) 2024-04-19 08:29:22 -05:00
optional_props.rs Make clippy happy on examples 2024-02-14 13:50:10 -08:00
overlay.rs Make clippy happy on examples 2024-02-14 13:50:10 -08:00
popup.rs Update examples, add css 2024-02-14 12:33:07 -08:00
query_segment_search.rs Implement hash fragments in the router (#2320) 2024-04-25 14:30:25 -04:00
read_size.rs chore: fix some typos in comments (#2340) 2024-04-19 08:29:22 -05:00
README.md Suspense boundaries/out of order streaming/anyhow like error handling (#2365) 2024-07-01 20:50:36 -07:00
readme.rs remove repetitive words (#2046) 2024-03-11 09:49:26 -05:00
reducer.rs cut out a number of changes from the hr PR (#2580) 2024-07-02 17:09:57 -07:00
router.rs Fix hydration 2024-03-06 12:19:59 -08:00
router_resource.rs fix header docs in router_resource 2024-06-19 09:06:42 -07:00
rsx_usage.rs Hotreloading of for/if/body, formatted strings, literals, component props, nested rsx, light CLI rewrite, cli TUI (#2258) 2024-07-17 19:11:18 -07:00
scroll_to_top.rs set up example scaping for docs.rs (#2450) 2024-05-28 13:05:55 -07:00
shortcut.rs Update more examples, add css for more examples 2024-02-14 13:48:58 -08:00
shorthand.rs Suspense boundaries/out of order streaming/anyhow like error handling (#2365) 2024-07-01 20:50:36 -07:00
signals.rs set up example scaping for docs.rs (#2450) 2024-05-28 13:05:55 -07:00
simple_list.rs cut out a number of changes from the hr PR (#2580) 2024-07-02 17:09:57 -07:00
simple_router.rs Fix eventhandler optional (#2119) 2024-03-20 09:04:37 -07:00
spread.rs Fix #1938, allow explicit props 2024-03-18 15:34:46 -07:00
ssr.rs Update more examples, add css for more examples 2024-02-14 13:48:58 -08:00
streams.rs Update more examples, add css for more examples 2024-02-14 13:48:58 -08:00
suspense.rs Suspense boundaries/out of order streaming/anyhow like error handling (#2365) 2024-07-01 20:50:36 -07:00
svg.rs Update more examples, add css for more examples 2024-02-14 13:48:58 -08:00
title.rs switch to a Document trait and introduce Script/Head/Style/Meta components (#2635) 2024-07-17 20:54:03 -05:00
todomvc.rs cut out a number of changes from the hr PR (#2580) 2024-07-02 17:09:57 -07:00
video_stream.rs Update more examples, add css for more examples 2024-02-14 13:48:58 -08:00
weather_app.rs Create closure type; allow async event handlers in props; allow short hand event handlers (#2437) 2024-06-10 18:47:07 -07:00
web_component.rs Update examples, add css 2024-02-14 12:33:07 -08:00
window_event.rs Update examples, add css 2024-02-14 12:33:07 -08:00
window_focus.rs Reduce churn in window behavior 2024-03-18 22:38:33 -07:00
window_zoom.rs fix clippy on zoom example 2024-07-10 12:50:57 -07:00
xss_safety.rs clean up some examples, ensuring stuff works 2024-03-06 19:50:07 -08:00

Examples

These examples are fully-fledged mini Dioxus apps.

You can run them with cargo run --example EXAMPLE_NAME. Example:

cargo run --example hello_world

(Most of these examples are run through webview, so you don't need the Dioxus CLI installed)

Basic Features

hello_world - Most basic example

readme - Counter example from the Readme

custom_assets - Include images

custom_html - Customize wrapper HTML

eval - Evaluate JS expressions

RSX

rsx_usage - Demo of all RSX features

xss_safety - You can include text without worrying about injections by default

Props

optional_props - Optional props

CSS

tailwind - You can use a library for styling

Input Handling

all_events - Basic event handling demo

file upload - Handle uploading files

form - Handle form submission

inputs - Input values

nested_listeners - Nested handlers and bubbling

textarea - Text area input

State Management

Async

login_form - Login endpoint example

suspense - Render placeholders while data is loading

tasks - Continuously run future

SVG

svg

Server-side rendering

ssr - Rendering RSX server-side

hydration - Pre-rendering with hydration

Common Patterns

disabled - Disable buttons conditionally

errors - Handle errors with early return

Routing

flat_router - Basic, flat route example

router - Router example

link - Internal, external and custom links

Platform Features

window_event - Window decorations, fullscreen, minimization, etc.

window_zoom Zoom in or out

Example Apps

calculator - Simple calculator

crm - Toy multi-page customer management app

dog_app - Accesses dog API

file_explorer - File browser that uses use_ref to interact with the model

todomvc - Todo task list example

TODO

Missing Features

  • Fine-grained reactivity
  • Refs - imperative handles to elements
  • Function-driven children: Pass functions to make VNodes

Missing examples

  • Shared state
  • Root-less element groups
  • Custom elements
  • Component Children: Pass children into child components
  • Render To string: Render a mounted virtualdom to a string
  • Testing and Debugging