Twig

Twig.js is a pure JavaScript implementation of the Twig PHP templating language.

Usage

There are 2 modes for rendering:

Pre-rendered (Default)

The values of the expressions are evaluated and added to the template during compilation of the result page.

The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

Example: This provides the value of the expression name

Custom Settings

{
  "template": {
    "data": {
      "name": "LiveCodes"
    }
  }
}

Full example below

Dynamic

To use this mode, the property template.prerender in custom settings should be set to false.

Example:

Custom Settings

{
  "template": {
    "prerender": false
  }
}

In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

Please note that template rendering occurs on page load, so the assignment must occur before that.

Example:

Script Editor (JS)

window.livecodes.templateData = { name: 'LiveCodes' };

Full example below

Language Info

Name

twig

Extension

.twig

Editor

markup

Compiler

Twig.js.

Version

twig: v1.15.4

Code Formatting

Using Prettier.

Custom Settings

Custom settings added to the property twig are passed as a JSON object to the twig method during compile. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example Usage

Pre-rendered

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "customSettings": {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
  };
  playground.params = {
    "compiled": "open"
  };
</script>

Dynamic

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "markup": {
      "language": "twig",
      "content": "Hello, {{ name }}!"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  };
</script>

Links

• Twig
• Twig documentation
• Twig.js
• Twig.js documentation