Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Blank Slate with Hot Reloading

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

5b23282512044871bb7bb0b6f35728c3

Open

Blank Slate with Hot Reloading

1 star806🌍 Public
CCurran Kelleher
Last edited Feb 20, 2025
Created on Jan 9, 2024
Forked from Hello VizHub 3

This blank slate demonstrates the VizHub V3 runtime’s hot reloading: a single `main` function renders “Hello World” with a fixed font size into a container DIV. Interactive widgets let users Alt-drag the numeric value directly in the editor to update the font size live, with changes reflected instantly alongside `state` and `setState` APIs for immutable state management. The example uses plain HTML and inline CSS for layout, with no external libraries. Its purpose is to show the minimal setup required before building larger visualizations.

AI-generated description

A 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 main function exported from index.js
  • The main function takes an argument container, a DIV that has measurable dimensions using clientWidth and clientHeight
  • The second argument to main is an options object containing state and setState.
  • The state of the application is stored in state, which is initialized as an empty object {}.
  • The setState function 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.