Search documentation of Plushie

# Plushie Examples

Copy Markdown View Source

Example apps demonstrating Plushie's features from minimal to complex. Run any example with:

    mix plushie.gui <Name>

With hot reload enabled (`--watch` flag or `config :plushie, code_reloader: true`), you can edit an example while the GUI is running and the window updates instantly.

## DSL styles

The examples deliberately use different DSL styles so you can compare:

- Keyword opts on the call line - `column(spacing: 8, padding: 16, children: [...])` Used by: Counter, Clock, Shortcuts, AsyncFetch, and most widget calls.
- Container inline props - options declared inside the do-block, mixed with children. Used by: Todo, Notes, Catalog (Layout tab), RatePlushie.
- Nested struct do-blocks - `border do width 1; rounded 8 end` for complex options. Used by: RatePlushie, ColorPicker app.
- Canvas widget modules - reusable canvas components in `widgets/`. Used by: ColorPicker (ColorPickerWidget), RatePlushie (StarRating, ThemeToggle).

All styles are interchangeable. Pick whichever reads best for your use case.

## Examples

### Counter

File: `counter.ex`

Minimal Elm-architecture example. Two buttons increment and decrement a count. Start here to understand `init/1`, `update/2`, and `view/1`.

    mix plushie.gui Counter

### Todo

File: `todo.ex`

Todo list with text input, checkboxes, filtering (all/active/completed), and delete. Demonstrates `text_input` with `on_submit`, `checkbox` with dynamic IDs, `scrollable` layout, and pattern matching on parameterized event IDs like `"todo:#{id}"`.

    mix plushie.gui Todo

### Notes

File: `notes.ex`

Notes app combining all five state helpers: `Plushie.State` (change tracking), `Plushie.Undo` (undo/redo for title and body editing), `Plushie.Selection` (multi-select in list view), `Plushie.Route` (stack-based `/list` and `/edit` navigation), and `Plushie.Data` (search/query across note fields). Shows how to compose multiple state helpers in a single model.

    mix plushie.gui Notes

### Clock

File: `clock.ex`

Displays the current UTC time, updated every second. Demonstrates `Plushie.Subscription.every/2` for timer-based subscriptions. The `subscribe/1` callback returns a timer that delivers `{:tick, timestamp}` events.

    mix plushie.gui Clock

### Shortcuts

File: `shortcuts.ex`

Logs keyboard events to a scrollable list. Demonstrates `Plushie.Subscription.on_key_press/0` for global keyboard handling. Shows modifier key detection (Ctrl, Alt, Shift, Super) and the `Plushie.Event.KeyEvent` struct.

    mix plushie.gui Shortcuts

### AsyncFetch

File: `async_fetch.ex`

Button that triggers simulated background work. Demonstrates `Plushie.Command.task/2` for running expensive operations off the main update loop. Shows the `{model, command}` return form from `update/2` and how async results are delivered back as events.

    mix plushie.gui AsyncFetch

### ColorPicker

Files: `color_picker.ex`, `widgets/color_picker.ex`

HSV color picker using a custom canvas widget. A hue ring surrounds a saturation/value square with drag interaction. The canvas drawing is extracted into a reusable widget module (`widgets/color_picker.ex`), showing the widget composition pattern. Demonstrates canvas layers with the do-block DSL, path commands, linear gradients with alpha, layer caching, and coordinate-based canvas events (press/move/release for continuous drag).

    mix plushie.gui ColorPicker

### Gallery

File: `gallery.ex`

Interactive widget gallery demonstrating common widget types: buttons (default, primary, danger, text styles), text input (with on_submit), checkbox, toggler, slider, pick list, radio buttons, progress bar, and styled text. A good starting point for exploring what widgets are available and what events they produce.

    mix plushie.gui Gallery

### Catalog

File: `catalog.ex`

Comprehensive widget catalog exercising every widget type across four tabbed sections:

- Layout: column, row, container, scrollable, stack, grid, pin, float, responsive, keyed_column, themer, space
- Input: button, text_input, checkbox, toggler, radio, slider, vertical_slider, pick_list, combo_box, text_editor
- Display: text, rule, progress_bar, tooltip, image, svg, markdown, rich_text, canvas
- Composite: pointer_area, sensor, pane_grid, table, simulated tabs, modal, collapsible panel

Use this as a reference for widget props and event patterns.

    mix plushie.gui Catalog

### RatePlushie

Files: `rate_plushie.ex`, `widgets/star_rating.ex`, `widgets/theme_toggle.ex`

App rating page with custom canvas-drawn widgets composed into a styled UI. Features a 5-star rating built from path-drawn star geometry and an animated emoji theme toggle: a smiley that slides, rotates upside down, and becomes a smiling imp when "Dark humor" is enabled. The entire page theme flips at the animation midpoint.

Demonstrates: custom canvas widgets as reusable modules, the interactive shape directive, canvas transforms for rotation, timer-based animation via subscriptions, container inline props with nested do-blocks (border, padding), theme-aware rendering, keyboard interaction (arrow keys adjust rating).

    mix plushie.gui RatePlushie

## Multi-file demos

The plushie-demos repo has larger self-contained projects with their own mix.exs, tests, and build configuration:

- gauge-demo
  - native Rust widget with commands, widget events, and optimistic updates (Tier C)
- sparkline-dashboard
  - render-only Rust canvas widget with timer subscriptions and multiple widget instances (Tier A)
- notes
  - pure Elixir widgets + state helpers (Route, Selection, Undo, Data) with keyboard shortcuts; no Rust required
- collab
  - collaborative scratchpad over native, WebSocket, and SSH transports

← Previous Page Wire Protocol
Next Page → Changelog