Examples
Thirteen things built with it
Not snippets. Each one is a working application: open the folder, open the HTML file, and it runs. There is no build step behind any of them, and nothing to install.
Every example loads the library from the same public CDN tag the documentation gives
you, cdn.jsdelivr.net/npm/voodoojs@1.1.0. The source you
read is the source that runs, and you can copy a file out of here into your own project
without changing a line.
Applications
state, lists, forms, HTTPTo-do list
The smallest complete application here. Add, complete, filter and persist, with the list surviving a reload.
v-forv-modelstorage
User CRUD
Create, read, update and delete against a REST endpoint, with validation and a loading state on every request.
v-resourceformsvalidation
Kanban board
Drag cards between columns. The order is reactive state, so nothing is stored in the DOM and a reload restores the board.
drag and dropstores
Store
Catalogue, filters, a cart that follows you between pages, and totals derived from state rather than recalculated by hand.
computedstoresmasks
Admin dashboard
Charts, tables, filters and a date range, laid out with the bundled UI components and no stylesheet framework.
full buildchartsUI kit
Pokédex
A real public API, paginated, searchable and cached, with skeleton states while requests are in flight.
full buildHTTProuter
Real time
WebSocket and Socket.IOChat
Rooms, presence and message history, written as attributes. Runs against a mock transport so it works with no server.
v-socketv-room
Chat, with a real server
The same interface pointed at an actual WebSocket server, including reconnection with backoff and a queue for messages sent while offline.
WebSocketneeds a server
Graphics and games
canvas, WebGL, game loopsTetris
A full game loop, keyboard input, collision and scoring, with the board held in reactive state and drawn from it.
full buildkeyboard
Breakout
Physics on a requestAnimationFrame loop, with the paddle bound to both pointer and keyboard.
full buildcanvas
Shaders
GLSL fragment shaders driven by reactive uniforms: move a slider and the value reaches the GPU without a redraw call of your own.
full buildWebGL
3D open world
A drivable car, terrain, buildings and trees, with the heads-up display written as ordinary attributes over the canvas.
WebGLglTF