This directory contains a growing number (currently 180) of standalone example projects, including live online versions, build instructions and commented source code.

If you want to contribute an example, please get in touch via PR, issue tracker, email or twitter!

#	Screenshot	Name	Description
001		adaptive-threshold	Interactive image processing (adaptive threshold)
002		ascii-raymarch	ASCII art raymarching with thi.ng/shader-ast & thi.ng/text-canvas
003		async-effect	Minimal demo using interceptors with an async side effect
004		big-font	Large ASCII font text generator using @thi.ng/rdom
005		bitmap-font	Figlet-style bitmap font creation with transducers
006		blurhash	Interactive & reactive image blurhash generator
007		boid-basics	Basic 2D boid simulation and spatial indexing neighbor lookups
008		canvas-dial	Canvas based dial widget
009		canvas-recorder	Self-modifying, animated typographic grid with emergent complex patterns
010		cellular-automata	2D transducer based cellular automata
011		color-contrast	Tool to interactively compute & visualize color contrasts against WCAG threshold
012		color-themes	Probabilistic color theme generator
013		commit-heatmap	Heatmap visualization of this mono-repo's commits
014		commit-table-ssr	Filterable commit log UI w/ minimal server to provide commit history
015		crypto-chart	Basic crypto-currency candle chart with multiple moving averages plots
016		csp-bus	CSP channel-based event handling, async transducers & reactive UI components
017		devcards	BMI calculator in a devcards format
018		dominant-colors	Color palette generation via dominant color extraction from uploaded images
019		ellipse-proximity	Interactive visualization of closest points on ellipses
020		fft-synth	Interactive inverse FFT toy synth
021		fiber-basics	Fiber-based cooperative multitasking basics
022		fisheye-menu	Fisheye menu list component for thi.ng/rdom
023		geom-classify-point	Polygon point classification (inside/boundary/outside)
024		geom-complex-poly	Shape conversions & operations using polygons with holes
025		geom-convex-hull	Convex hull & shape clipping of 2D polygons
026		geom-csv-piechart	Piechart visualization of CSV data
027		geom-extra-hiccup	Embedding thi.ng/hiccup data/elements in thi.ng/geom shape hierarchies
028		geom-fuzz-basics	geom-fuzz basic shape & fill examples
029		geom-hexgrid	Hex grid generation & tessellations
030		geom-knn	Doodle w/ K-nearest neighbor search result visualization
031		geom-knn-hash	K-nearest neighbor search in an hash grid
032		geom-sdf-logo	(Re)Constructing the thi.ng logo using a 2D signed-distance field
033		geom-sdf-path	SVG path to SDF, applying deformation and converting back to SVG
034		geom-terrain-viz	2.5D hidden line visualization of digital elevation files (DEM)
035		geom-tessel	Animated, recursive polygon tessellations
036		geom-unique-edges	Iterating the unique edges of a tessellation
037		geom-voronoi-mst	Poisson-disk shape-aware sampling, Voronoi & Minimum Spanning Tree visualization
038		geom-webgl-attrib-pool	Augmenting thi.ng/geom shapes for WebGL, using instancing & attribute buffers
039		geom-webgl-basics	Converting thi.ng/geom shape types for WebGL
040		gesture-analysis	Mouse gesture / stroke analysis, simplification, corner detection
041		gpgpu-reduce	GPU-based data reduction using thi.ng/shader-ast & WebGL multi-pass pipeline
042		grid-iterators	Visualization of different grid iterator strategies
043		hdiff	Applying thi.ng/hdiff to generate static HTML diff output
044		hdom-basics	Minimal hdom usage example
045		hdom-benchmark	hdom update performance benchmark (old version)
046		hdom-benchmark2	hdom update performance benchmark w/ config options
047		hdom-canvas-clock	Realtime analog clock demo
048		hdom-canvas-draw	Interactive pattern drawing demo using transducers
049		hdom-canvas-particles	2D Bezier curve-guided particle system
050		hdom-canvas-shapes	Various hdom-canvas shape drawing examples & SVG conversion / export
051		hdom-dropdown	Custom dropdown UI component for hdom
052		hdom-dropdown-fuzzy	Custom dropdown UI component w/ fuzzy search
053		hdom-dyn-context	Using custom hdom context for dynamic UI theming
054		hdom-elm	Using hdom in an Elm-like manner
055		hdom-inner-html	Higher-order component for rendering HTML strings
056		hdom-local-render	Isolated, component-local DOM updates
057		hdom-localstate	UI component w/ local state stored in hdom context
058		hdom-skip	Skipping UI updates for selected component(s)
059		hdom-skip-nested	Skipping UI updates for nested component(s)
060		hdom-theme	Example for themed components proposal
061		hdom-toggle	Customizable slide toggle component demo
062		hdom-vscroller	Virtual scroller component for large tables / lists
063		hiccup-canvas-arcs	Animated arcs & drawing using hiccup-canvas
064		hiccup-canvas-basics	Basic hiccup-based canvas drawing
065		hiccup-css-image-transition	Generating pure CSS image transitions
066		hydrate-basics	Hiccup / hdom DOM hydration example
067		ifs-fractal	Barnsley fern IFS fractal renderer
068		imgui	Canvas based Immediate Mode GUI components
069		imgui-basics	Minimal IMGUI usage example
070		interceptor-basics	Event handling w/ interceptors and side effects
071		interceptor-basics2	Event handling w/ interceptors and side effects
072		iso-plasma	Animated sine plasma effect visualized using contour lines
073		json-components	Transforming JSON into UI components
074		kmeans-viz	k-means clustering visualization
075		layout-gridgen	Randomized space-filling, nested grid layout generator
076		lispy-repl	Browser REPL for a Lispy S-expression based mini language
077		login-form	Basic SPA example with atom-based UI router
078		mandelbrot	Worker based, interactive Mandelbrot visualization
079		markdown	Markdown to Hiccup to HTML parser / transformer
080		mastodon-feed	Mastodon API feed reader with support for different media types, fullscreen media modal, HTML rewriting
081		meta-css-basics	Basic thi.ng/meta-css usage & testbed
082		multitouch	Basic rstream-gestures multi-touch demo
083		package-stats	CLI util to visualize umbrella pkg stats
084		parse-playground	Parser grammar livecoding editor/playground & codegen
085		pixel-basics	Pixel buffer manipulations
086		pixel-colormatrix	Matrix-based image color adjustments
087		pixel-dither	Showcase of various dithering algorithms
088		pixel-gradients	Randomized 4-point 2D color gradient image generator
089		pixel-indexed	Image dithering and remapping using indexed palettes
090		pixel-normal-map	Normal map creation/conversion basics
091		pixel-sorting	Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel
092		pixel-waveform	RGB waveform image analysis
093		pointfree-geom	Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang
094		pointfree-svg	Generate SVG using pointfree DSL
095		poisson-circles	2D Poisson-disc sampler with procedural gradient map
096		poisson-image	Image-based Poisson-disk sampling
097		poly-spline	Polygon to cubic curve conversion & visualization
098		poly-subdiv	Animated, iterative polygon subdivisions & visualization
099		porter-duff	Port-Duff image compositing / alpha blending
100		procedural-text	Procedural stochastic text generation via custom DSL, parse grammar & AST transformation
101		quasi-lattice	Quasi-random lattice generator
102		ramp-scroll-anim	Scroll-based, reactive, multi-param CSS animation basics
103		ramp-synth	Unison wavetable synth with waveform editor
104		rasterize-blend	Steering behavior drawing with alpha-blended shapes
105		rdom-async	Basic & barebones usage of async iterables in thi.ng/rdom
106		rdom-basics	Demonstates various rdom usage patterns
107		rdom-canvas-basics	Minimal rdom-canvas animation
108		rdom-delayed-update	Dynamically loaded images w/ preloader state
109		rdom-dnd	rdom drag & drop example
110		rdom-formgen	Basic usage of the declarative rdom-forms generator
111		rdom-key-sequences	rstream & transducer-based FSM for converting key event sequences into high-level commands
112		rdom-klist	Basic usage of thi.ng/rdom keyed list component wrapper
113		rdom-lazy-load	Lazy loading components via @thi.ng/rdom
114		rdom-lissajous	rdom & hiccup-canvas interop test
115		rdom-reactive-svg	Animated SVG elements with reactive attributes
116		rdom-router	Basic thi.ng/router usage with thi.ng/rdom components
117		rdom-search-docs	Full umbrella repo doc string search w/ paginated results
118		rdom-svg-nodes	rdom powered SVG graph with draggable nodes
119		rdom-web-components	Defining & using basic Web Components (with shadow DOM) via @thi.ng/rdom & @thi.ng/meta-css
120		related-images	Responsive image gallery with tag-based Jaccard similarity ranking
121		render-audio	Generative audio synth offline renderer and WAV file export
122		rotating-voronoi	Animated Voronoi diagram, cubic splines & SVG download
123		router-basics	Complete mini SPA app w/ router & async content loading
124		rstream-dataflow	Minimal rstream dataflow graph
125		rstream-event-loop	Minimal demo of using rstream constructs to form an interceptor-style event loop
126		rstream-grid	Interactive grid generator, SVG generation & export, undo/redo support
127		rstream-hdom	rstream based UI updates & state handling
128		rstream-spreadsheet	rstream based spreadsheet w/ S-expression formula DSL
129		rstream-sync	Minimal rstream sync() example using rdom
130		rstream-system-bus	Declarative component-based system with central rstream-based pubsub event bus
131		scenegraph	2D scenegraph & shape picking
132		scenegraph-image	2D scenegraph & image map based geometry manipulation
133		shader-ast-canvas2d	2D canvas shader emulation
134		shader-ast-easings	Shader-AST meta-programming techniques for animated function plots
135		shader-ast-evo	Evolutionary shader generation using genetic programming
136		shader-ast-noise	HOF shader procedural noise function composition
137		shader-ast-raymarch	WebGL & JS canvas2D raymarch shader cross-compilation
138		shader-ast-sdf2d	WebGL & JS canvas 2D SDF
139		shader-ast-tunnel	WebGL & Canvas2D textured tunnel shader
140		shader-ast-workers	Fork-join worker-based raymarch renderer (JS/CPU only)
141		shader-graph	Minimal shader graph developed during livestream #2
142		simd-plot	Fitting, transforming & plotting 10k data points per frame using SIMD
143		soa-ecs	Entity Component System w/ 100k 3D particles
144		spline-tangent	Compute cubic spline position & tangent using Dual Numbers
145		stacked-layout	Responsive & reactively computed stacked column layout
146		stratified-grid	2D Stratified grid sampling example
147		svg-barchart	Simplistic SVG bar chart component
148		svg-particles	Basic 2D particle system w/ SVG shapes
149		svg-resample	SVG path parsing & dynamic resampling
150		svg-waveform	Additive waveform synthesis & SVG visualization with undo/redo
151		talk-slides	hdom based slide deck viewer & slides from my ClojureX 2018 keynote
152		text-canvas	3D wireframe textmode demo
153		text-canvas-image	Textmode image warping w/ 16bit color output
154		thing-browser	Tree-based UI to find & explore thi.ng projects via their associated keywords
155		thing-packages-quiz	thi.ng/rdom & thi.ng/rstream based quiz to guess thi.ng package names
156		todo-list	Obligatory to-do list example with undo/redo
157		trace-bitmap	Multi-layer vectorization & dithering of bitmap images
158		transducers-hdom	Transducer & rstream based hdom UI updates
159		triple-query	Triple store query results & sortable table
160		unbiased-normals	Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere
161		viz-ridge-lines	Interactive ridge-line plot
162		viz-scatter-plot	Interactive scatter & line plot of low-discrepancy samples
163		webgl-channel-mixer	rdom & WebGL-based image channel editor
164		webgl-cube	WebGL multi-colored cube mesh
165		webgl-cubemap	WebGL cube maps with async texture loading
166		webgl-float-fbo	Drawing to floating point offscreen / multi-pass shader pipeline
167		webgl-game-of-life	Game of Life implemented as WebGL2 multi-pass shader pipeline
168		webgl-grid	WebGL instancing, animated grid
169		webgl-msdf	WebGL MSDF text rendering & particle system
170		webgl-multipass	Minimal multi-pass / GPGPU example
171		webgl-shadertoy	Shadertoy-like WebGL setup
172		webgl-ssao	WebGL screenspace ambient occlusion
173		webgl-texture-paint	Interactively drawing to & reading from a WebGL offscreen render texture
174		wolfram	1D Wolfram automata with OBJ point cloud export
175		xml-converter	XML/HTML/SVG to hiccup/JS conversion
176		zig-canvas	Zig-based DOM creation & canvas drawing app
177		zig-cellular	Zig-based 2D multi-behavior cellular automata
178		zig-counter	Simple Zig/WASM click counter DOM component
179		zig-todo-list	Zig-based To-Do list, DOM creation, local storage task persistence
180		zig-webgl	Basic Zig/WebAssembly WebGL demo