Skip to main content


JSX is an embeddable XML-like syntax (.tsx for TypeScript files). It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. JSX rose to popularity with the React framework, but has since seen other implementations as well. TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript.

DeviceScript supports TSX compilation as documented in the TypeScript documentation.


The sampleui package is a sample UI framework based on a set of TSX functional components. It is designed to be used with small OLED screens using the graphics package.

This snippet show a potential use of the JSX syntax to render a progress bar on a screen.

A progress bar screenshot

pot.reading.subscribe(async (pos: number) => {
await renderOnImage(

If you are familiar with React developement, the implementation of HorizontalGauge will feel familiar.

export function HorizontalGauge(props: {
x?: number
y?: number
width: number
height: number
value: number
showPercent?: boolean
}): JSX.Element {
const { x, y, width, height, value, showPercent } = props
const w = Math.round((width - 4) * value)
const fc = value > 0.5 ? 0 : 1
return (
<Translate x={x} y={y}>
<Rect width={width} height={height}></Rect>
<FillRect x={2} y={2} width={w} height={height - 4} />
{!!showPercent && (
<Style fillColor={fc}>
<Text x={width / 2} y={2}>
{Math.round(value * 100) + "%"}

Where are the UI frameworks?!!?!

We do not provide a fully fledge UI framework on top of the JSX compilation support. The sample is very limited (no layout, no dom, no virtual DOM, ...). If you feel up to the challenge, we recommend having a try at it!