protic

Zero-effort HTML preprocessing/templating, with conditionals, includes, macros, and more


License
BSD-2-Clause

Documentation

protic

Zero-effort HTML preprocessing/templating, with conditionals, includes, macros, and more.

Learning More

Check out the docs, and try out the live demo.

Example

<div +#myid +.mycls></div> <!-- Easy ids and classes -->

<!-- If statements -->
<+ if="$config == dev" do>
  <p>Development build!</p>
<+ orelse do>
  <p>Production build!</p>
</+>

<!-- HTML includes (and conditional includes) -->
<+ include="myfile.html">
<+ if="$config == dev" include="dev.html">
<+ else include="prod.html">

<!-- Variables -->
<+ set var="value">

<!-- Expressions inside attributes -->
<+ set width="20px">
<div +style="width: $width"></div>

<+ for var to="a b c">
</+>

<!-- Macros -->
<+ macro="expand" slot>
  <p>Your name is: <+ value="$@name"></p>
  <+ if="$@?is-upper" do>
    <p>Is uppercase!</p>
  </+>

  <!-- Debug printing -->
  <+ print="is-upper: ($@?is-upper and true or false) myname: $@name">
  <+ slot>
</+>

<!-- Using macros -->
<+@ expand name="myname" is-upper>
  <p>Stuff here</p>
</+@>

<!-- Like 'include', but also imports macros -->
<+ require="myfile.html">

Source code structure

  • protic - The protic core code, written in Dart.
  • protic-js - protic, compiled to JavaScript for use in Node or the browser.
  • protic_transformer - A Dart Pub transformer for protic
  • docs - Website/documentation, powered by Docute.