This is a demo of the @techandsoftware/teletext package on npm, which renders a teletext display using SVG graphics in the browser. The package provides an API to draw on the screen. The demo source code is available from the git repo.

Tap or click the buttons below, or use your keyboard keys, to try out different API functions.

Key controls Used for
Toggle reveal (no effect if the page doesn't contain concealed characters)
Displays a test page out of the several built-in pages. Pages courtesy of Teletext Archaeologist
Toggle mixed mode display

(for load)
Draws a page using the loadPageFromEncodedString() API. Page courtesy of Teletext Archaeologist
Draw mosaic graphics using a pixel art scaling algorithm.
This uses @techandsoftware/teletext-plugin-smooth-mosaic
Draws a page using the setPageRows() API and attribute generation
Toggle boxed mode display (display is blank if the page doesn't contain boxed characters)
Change the font (see the console logs for the font in use)

(for cells)
Toggle grid

Add enhancements. Requires level 1.5 or 2.5
Generate a randomised page
Change the aspect ratio

(for wipe)
Clears the screen
Set the teletext screen height to 80% of the browser window height. (For this demo the screen width needs to be > 767 pixels for this to work due to the responsive sizing at smaller widths).

(for encoding)
Go to the next g0 character set

(for view)
Switch between using a font or graphics to render the teletext mosaics

Show a test page with double width and double size characters. You'll also need to select level 2.5