Preview

@preview

You can preview HTML by using @preview comment like below.

<!--@preview
<p>Hello world</p>
-->

@template

You can define original HTML tags to be rendered on preview screen.

<!--@template -->
code here
<!--@/template -->

define default variables

You can also declare default variables when no parameters are found

<!--@template text="hoge" -->
<p>{text}</p>
<!--@/template -->

Supporse that above component name is main-visual, You can call defined template via @preview.

<!--@preview 
<main-visual text="hello world" />
-->

is to be

<p>hello world</p>