Blank Slate
This example demonstrates the minimal setup required to run a visualization in the VizHub V3 Runtime Environment. It renders a simple "Hello World!" message with inline HTML and CSS, set to a large font size. The code exports a `main` function that receives a `container` DIV element, then directly assigns to its `innerHTML`. It uses no external libraries, and the state management options (`state` and `setState`) are present but unused. The example serves as a blank starting point for exploring the runtime’s hot reloading capabilities.
AI-generated descriptionA blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.
- There is no
index.html- that's what triggers the V3 Runtime - The entry point is the
mainfunction exported fromindex.js - The
mainfunction takes an argumentcontainer, a DIV that has measurable dimensions usingclientWidthandclientHeight - The second argument to
mainis an options object containingstateandsetState. - The state of the application is stored in
state, which is initialized as an empty object{}. - The
setStatefunction can be called with a function that uses the previous state to create a new state object using immutable update patterns. - For an interactive example, see Mouse Follower.
Full course playlist: YouTube: Constructing Visualization 2024.