Include content block if variable is truthy.

Can also abbreviate long variable paths with the as attribute.

<v-json target="$dog" >
  {
    "name": "Freddy"
  }
</v-json>

<v-with source=$dog.name as=$name >
  <p>This will display the name : $name </p>
</v-with>

<v-with source=$dog.phone_number >
  <p>This would not display anything</p>
</v-with>

Display the contents only when the condition matches.

By default the contents are displayed when $source is considered truthy.

If multiple check arguments are supplied then all must match.

<v-json target=$number >22</v-json>

<v-if $number gt=3 gte=22 lt=100 lte=80 >
  <p>All true!</p>
</v-if>

Display the contents only when the condition does not match.

Works exactly the same way as v-if but negated.

<v-nodejs target=$data >
  return { foo:"Foo" }
</v-nodejs>

<v-unless $data.bar >
  No bar is the data
</v-unless>

Repeat the content of the block for each element of source array or varible.

<v-json target=$simpsons >["Marge, "Homer", "Lisa", "Bart", "Maggie"]</v-json>
<ul>
  <v-for-each $simpsons as=$character keyas=$i >
    <li>$i : $character</li>
  </v-for-each>
</ul>

Define a section of the page that can be requested independently of the rest of the page.

It is useful when you want to be able to refresh part of the client page using ajax.

<form v-name="create_thingy" >

<v-sql target=$thingys >
  select * from thingys;
</v-sql>

<v-portal path="/thingys" >
  <v-for-each $thingys >
    <p>$thingy.name</p>
  </v-for-each>
</v-portal>

Create a new variable at target from a json body or using the src argument

<v-json target=$inline >
  {
    iam: "some json"
  }
</v-json>

<v-json target=$fromfile src="./some/file.json" />

Create a new variable at target from a yaml document specified by the src argument.

Cannot use a body due to confusing indenting.

<v-yaml target=$data src="./my_data.yml" />

<h3>$data.title</h3>

Load in-place a markdown document.

No templating occurs on the markdown document.

You can load markdown either from a src file, a variable, or the element body.

When using the element body make sure that the tag is left-aligned.

<v-markdown>
# Title
```
Some code
```
</v-markdown>

<v-markdown src="./some/markdown.md" />

<v-markdown $a_markdown_var />

Execute sql query and set a new variable at target

<v-sql target=$people > select * from people where occupation = 'developer'; </v-sql>

Embed a nodejs function and set target to the return value

If the import attribute is set then the javascript library at that path will be imported and set to the target variable.

Dump the current variable as json inside a pre tag

<v-json target=$data >{ "foo":"Foo", "bar":"Bar" }</v-json>
<v-dump source=$data />

A hint to the VTML engine to listen on this port

<v-hint-port port="1066" />

Define a page within the document.

See the Pages documentation form more details.

<v-page path="/cats" >
  <p>Cat page!</p>
</v-page>
<v-page path="/dogs" >
  <p>I'm the Dog page</p>
</v-page>

Expose a file specified at (src) at http (path)

<v-expose path="/favicon.ico" src="./assets/vtml_icon.png" content-type="image/png" />

Set a response cookie.

The maximum cookie age will be set to the sum of the max-* attribute values.

<v-set-cookie
    name="session_key"
    value=$session_key
    max-days=365
/>

Include an external vtml file. This tag is processed before anything else.

<v-include src="./some/other/file.vtml" />

Although form is an inbuilt tag we do alter it's behaviour. Defining a form with method="POST" and an v-name attribute will create an action endpoint.

Specify the output jsonschema of a form API endpoint and the variable to output.

<form v-name="create_person" >
  <input name="new_name" required />

  <v-action>
    <v-sql target=$new_person single-row >
      -- Insert a new person and return the new row
      insert into people (name) values ($.body.new_name) returning id, name;
    </v-sql>

    <v-output $new_person >
      {
        "title": "Person",
        "type": "object",
        "properties": {
          "id": { "type":"number" },
          "name": { "type":"string" }
        }
      }
    </v-output>
  </v-action>
</form>

Similar to the v-if tags the v-check-* tags will conditionally display a block.

Unlike the x-if tag an error status will be set for the whole page if the condition is not met.

Useful for creating an error-barrier for resources.

<v-sql target=$user single-row >
  select * from user where email = $.headers.x-email
</v-sql>

<v-check-authorized source="$user" >
  <p>Some sensitive information here...</p>
</v-check-authorized>

Rendered when an error has occured.

The special variable $error will be available to display.

The error variable contains:

• code: The error status code e.g. 404
• message: A client safe error message e.g. Not found

You don't need to set the error code to the page with <v-set-status>.

<v-catch>
  <p>Error $error.message</p>
</v-catch>

Rendered when no error has occured. Useful when a section may result in an error.

Can be used in conjunction with v-catch to catch errors that may occur within it's contents.

<v-try> <v-sql>Im invalid SQL</v-sql> </v-try> <v-catch> <p>Error $error.message</p> </v-catch>

Set the status code.

Rendering will continue as normal. If you want to report a non-success status take a look at the v-check-* tags instead.

<form v-name="noddy" >
  <v-action>
    <v-sql>insert into mytable values (22)</v-sql>
    <v-set-status code=201 />
  </v-action>
</form>

Redirect the client to the specied path. The path is templated and can be used to redirect after an action or when a page needs a fallback.

<form v-name="noddy" >
  <input type="text" name="name" />

  <v-action>
    <v-sql target=$newdog >
      insert into dogs (name) values ($.body.name);
    </v-sql>

    <v-redirect path="/dogs/view/$newdog.id" />
  </v-action>
</form>