Demos

Ten applications built with Ripl, each one running live in the page.

Two are data visualization dashboards: the Trading Dashboard draws candlestick, line and volume charts over live Alpha Vantage market data, and Product Analytics puts line, bar, pie, heatmap, sankey, funnel, gauge and scatter charts behind a shared period selector. Three are drawing tools: the Graphing Calculator plots equations, implicit contours and 3D surfaces from an editable expression list, Freeform Drawing is an Excalidraw-style canvas with pencil, shape, connector and text tools plus PNG/SVG export, and the Mermaid Diagram renderer parses Mermaid syntax and lays flowcharts out from Ripl core elements. Four are 3D: the Jet Engine exploded view on canvas, the same engine on WebGPU with WGSL shaders and a hardware depth buffer, an animated Piston Mechanism, and a Teapot built from parametric surfaces under a three-point light rig, with switchable materials, textures and wireframe. The last, the Interactive Terminal, renders shapes, animations and charts as Unicode braille.

Available Demos

Graphing CalculatorA Desmos-style graphing calculator: an editable equation list, auto-detected parameter sliders, adaptively re-sampled curves, marching-squares implicit plots, and orbitable 3D surfaces from @ripl/3d.Freeform DrawingAn Excalidraw-style drawing canvas with pencil, pen, highlighter, shape, connector and text tools, plus pan/zoom via the Ripl navigator, selection, undo/redo and PNG/SVG export.Trading DashboardA live stock trading dashboard with market indices, commodities, symbol search, candlestick charts and historical performance, drawn from Alpha Vantage data.Product AnalyticsA product analytics dashboard on mock data: line, bar, pie, heatmap, sankey, funnel, gauge and scatter charts, all driven by one period selector.Mermaid DiagramsA live Mermaid flowchart renderer that parses Mermaid syntax and draws diagrams from Ripl core elements, with animated transitions and hover interactions.Jet Engine 3D (Canvas)An interactive 3D exploded view of a jet engine drawn with @ripl/3d: flat-shaded faces with edge outlines, orbit controls, and hover highlighting.Jet Engine 3D (WebGPU)The jet engine exploded view re-implemented with @ripl/webgpu: GPU rendering with hardware depth testing, WGSL shaders, and 4× MSAA.Piston Mechanism 3DAn animated single-cylinder slider-crank built with @ripl/3d, showing a crankshaft, connecting rod, and piston head in mechanical motion.Teapot 3DA teapot modelled entirely from parametric surfaces — surfaces of revolution for the body, lid and knob, swept tubes for the spout and handle — lit by a three-point rig of coloured lights, with switchable materials, textures and wireframe.Interactive TerminalAn interactive terminal running on @ripl/terminal with a menu-driven interface: basic shapes, animations, or line, bar, stock and Gantt charts rendered in Unicode braille.