Start using HTMS

This is a tutorial to help you start using htms

First create a new html file with boilerplate

<!DOCTYPE html>
<html>
  <head>
    <title>HTMS Tutorial</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Adding HTMS

To add htms into the page you just have to add a script, style and a element, more info in the installation.

<!DOCTYPE html>
<html>
  <head>
    <title>HTMS Tutorial</title>

    <!-- Import -->
    <script src="https://htms.fsh.plus/js/v3.js" type="module" crossorigin="anonymous"></script>
    <style>htms{display:none}</style>
    <!-- Settings -->
    <htms></htms>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

Well done you have added htms to your page, now lets use it!

Using HTMS

In this section we will use htms to add a sample

First lets create a file to store our samples, name it samples.htms for example, and lets add an example template:

<sample name="Test">
  <p>This is a sample</p>
</sample>

Then once we have done that we just add to our html file the commands:

Finally modify the file with the changes

<!DOCTYPE html>
<html>
  <head>
    <title>HTMS Tutorial</title>

    <!-- Import -->
    <script src="https://htms.fsh.plus/js/v3.js" type="module" crossorigin="anonymous"></script>
    <style>htms{display:none}</style>
    <!-- Settings -->
    <htms>
      import "Test" from "samples.htms"
      replace "Element" with "Test"
    </htms>
  </head>
  <body>
    <p>Hello world</p>
    <Element></Element>
  </body>
</html>

And your done, you have added and used htms! Check our other tutorials for more advanced useage.

Last updated