In order to create a new component using ZinoJS, simply create a new HTML file that looks like that:

1
2
3
4
<my-component>
	<!-- the content of this component comes here -->
	<p>Hello {{ name }}!</p>
</my-component>

This very simple component will just render the text “Hello World!” in a P tag.

In order to use this component, you have to load it in your page’s HTML using a link tag with rel="zino-tag" specified. Additionally, you will need to add the zino.js at the very end of your body tag.

Here a simple example page HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<head>
		<!-- load the component statically -->
		<link rel="zino-tag" href="my-component.html"/>
	</head>
	<body>
		<!-- use component, will be rendered here. -->
		<my-component name="World"></my-component>

		<!-- load ZinoJS, initialize & mount all statically loaded components -->
		<script src="zino.js"></script>
	</body>
</html>

Next Steps

Check out the tutorial and API documentation or take a look at the examples.