Skip to main content
SimilarExport ZIP
100%

Typerefinery.ai Embed Component

✓ Published2🌍 Public
MMax Barrass
Last edited Mar 1, 2024
Created on Mar 1, 2024

This example demonstrates a minimal "Hello World" visualization that renders text directly into a provided container using the VizHub V3 Runtime Environment. It shows how a simple, static text element can be displayed with a large, adjustable font size, serving as a blank starting point for interactive widget development. The code exports a `main` function that receives the container and an options object, then sets the container’s inner HTML with inline styles, relying on the container’s measured dimensions for layout. No external libraries are used; it leverages plain JavaScript and the runtime’s state management for future interactivity.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Typerefinery.ai Embed Component

This example demonstrates a minimal "Hello World" visualization built for the VizHub V3 Runtime Environment, where a single line of text is rendered at a large font size and centered within the container. The code exports a `main` function that receives a container DIV and directly sets its inner HTML with an inline-styled div, using the container's dimensions to determine layout. There is no interactive behavior or external data source, serving as a blank slate for understanding the runtime's hot-reloading and state management capabilities.

SSantosh
91% match
Loading thumbnail…

Fork of Typerefinery.ai Embed Component

This example demonstrates a minimal "Hello World" application built for the VizHub V3 runtime environment. It shows how a single numeric value, a font size of 222 pixels, directly controls the visual scale of centered text. The code exports a `main` function that receives a container DOM element, then sets its inner HTML with an inline-styled div. It uses no external libraries, relying purely on vanilla JavaScript and CSS for rendering. The approach highlights the runtime’s hot-reloading and interactive state management, though the current state remains an empty object.

Bbrett@cloudaccelerator.co
87% match
Loading thumbnail…

Hello World!

This example demonstrates the foundational "Hello World" template for the VizHub V3 Runtime Environment, showing how a blank slate initializes and renders text within a container. The code exports a `main` function that takes a `container` DIV element and sets its inner HTML with an inline-styled message. It highlights the simplified entry point that replaces the traditional `index.html`, relying on the container’s measured dimensions for layout. The example’s static font size hints at the interactive widget capability, where Alt-dragging numbers enables real-time property adjustments through hot reloading.

Ttharika.p2802@gmail.com
81% match
Loading thumbnail…

Hello world

This example demonstrates the minimal setup for a VizHub V3 visualization, rendering a simple text message inside a container element using pure JavaScript. The code exports a `main` function that receives the container and options, displaying “Hello World” with the default styling. It highlights the runtime’s interactive widget support, where holding the Alt key and dragging a numeric value in the editor triggers continuous hot reloading. The example uses no external libraries, showcasing the streamlined entry point with `index.js` instead of an `index.html` file.

Llsq15916098304@qq.com
80% match
Loading thumbnail…

Hello-World

This example demonstrates the "Hello World" starting point for the VizHub V3 Runtime Environment, showing a simple text message rendered inside a container. The code uses the exported `main` function from `index.js` to set the container's inner HTML with an inline style, where the font size is defined as a numeric value. The example highlights continuous hot reloading, allowing properties like font size to be adjusted interactively by alt-dragging the number in the editor, providing immediate visual feedback.

Ggurtberly@gmail.com
79% match
Loading thumbnail…

Blank Slate

This example demonstrates the minimal setup required for a VizHub V3 visualization, rendering “Hello World!” in large text centered within a container. It uses the exported `main` function, which receives a `container` DIV and an options object, to set the container’s inner HTML with inline styles. The code does not rely on external libraries or APIs; instead, it shows the basic structure for continuous hot reloading, where state is initially empty and can be updated via `setState`. The rendering approach is direct DOM manipulation via `container.innerHTML`.

Rrichard.adamson@hotmail.com
79% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the "Hello World" starting point for the VizHub V3 Runtime Environment, which provides continuous hot reloading and interactive widgets. It renders text with a configurable font size, set to 217 pixels, centered within a container div. The code exports a `main` function that takes a `container` element and updates its `innerHTML` directly, showcasing the simplified entry point that replaces the traditional `index.html` file. This approach allows developers to adjust properties dynamically by Alt-dragging numeric values in the editor.

SShayan Radi
79% match
Loading thumbnail…

data visualization

This example demonstrates the VizHub V3 runtime environment, where a static "Hello World" message is rendered with an adjustable font size using plain HTML and inline styles. The code exports a `main` function that receives a container element and sets its inner HTML, showcasing the simplified entry point without an `index.html` file. By Alt-dragging the `fontSize` variable in the editor, users experience continuous hot reloading through interactive widgets, highlighting real-time feedback for iterative development.

Ssuruthirsr929@gmail.com
79% match