Hello World example

Here is a basic hello world example. You can copy the content and run locally.

hello-world.html :

<!doctype html>
<html>
<body>

<div id="app-container"></div>

<script src="hello-world.js" type="module"></script>

</body>
</html>

hello-world.js :

import Component from './node_modules/@xylem-js/xylem-js/dom/Component.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';
import parseHTML from './node_modules/@xylem-js/xylem-js/dom/parseHTML.js';

class HelloWorld extends Component
{
	build()
	{
		return parseHTML([
			'<div>',
			[
				'Hello, World!',
			],
			'</div>',
		]);
	}
}

mountComponent(new HelloWorld(), document.getElementById('app-container'));

Live Example

Open in new tab

Using JSX

Here is the JSX version of hello world example. (Read the "JSX" page for JSX configuration)

hello-world-jsx.html :

<!doctype html>
<html>
<body>

<div id="app-container"></div>

<script type="importmap">
{
	"imports": {
		"@xylem-js/jsx/jsx-runtime": "./node_modules/@xylem-js/jsx/jsx-runtime.js"
	}
}
</script>
<script src="hello-world-jsx.js" type="module"></script>

</body>
</html>

hello-world-jsx.tsx :

import Component from './node_modules/@xylem-js/xylem-js/dom/Component.js';
import mountComponent from './node_modules/@xylem-js/xylem-js/dom/mountComponent.js';

class HelloWorld extends Component
{
	build()
	{
		return <>
			<div>
				Hello, World!
			</div>
		</>;
	}
}

mountComponent(new HelloWorld(), document.getElementById('app-container')!);

Live Example (JSX)

Open in new tab