{"id":10518,"library":"art-template","title":"art-template","description":"art-template is a high-performance JavaScript template engine designed for both Node.js and browser environments. It achieves near-JavaScript-limit rendering speeds through a 'scope pre-declared' optimization technique. The current stable version is 4.13.4, with a release cadence that addresses bugs, performance, and adds minor features, as seen in recent patch and minor releases (e.g., v4.13.0 for performance fixes, v4.13.2 for type definitions). Key differentiators include its extreme speed, debugging friendliness (accurate error positioning, breakpoint support with Webpack loader), support for template inheritance, sub-templates, and a small browser footprint (6KB). It integrates with popular frameworks like Express and Koa, and build tools like Webpack.","status":"active","version":"4.13.4","language":"javascript","source_language":"en","source_url":"git://github.com/goofychris/art-template","tags":["javascript","template","typescript"],"install":[{"cmd":"npm install art-template","lang":"bash","label":"npm"},{"cmd":"yarn add art-template","lang":"bash","label":"yarn"},{"cmd":"pnpm add art-template","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary art-template rendering function or object is exported as the default for both CJS and ESM environments. TypeScript users should prefer the ESM import.","wrong":"import { template } from 'art-template';","symbol":"template","correct":"import template from 'art-template';"},{"note":"Configuration options are managed via the `defaults` property on the main `template` object, not as a separate named export.","wrong":"import { defaults } from 'art-template';","symbol":"template.defaults","correct":"import template from 'art-template'; template.defaults.escape = false;"},{"note":"The `compile` method for pre-compiling templates is a property of the main `template` object/function, not a direct named export.","wrong":"import { compile } from 'art-template';","symbol":"template.compile","correct":"import template from 'art-template'; const render = template.compile(source);"}],"quickstart":{"code":"import template from 'art-template';\n\n// 1. Configure global defaults (optional)\ntemplate.defaults.escape = false; // Disable HTML escaping for raw output\n\n// 2. Define a template string\nconst templateString = `\n \n \n \n {{ title }}\n \n \n

Hello, {{ name | capitalize }}!

Your items:

Item #{{ $index + 1 }}: {{ $value }}

\n {{ if showFooter }}\n \n {{ /if }}\n

Raw HTML (if escape is disabled): {{ @rawHtml }}

\n \n \n`;\n\n// 3. Register a custom filter (optional)\ntemplate.defaults.imports.capitalize = (value: string) => {\n return value.charAt(0).toUpperCase() + value.slice(1);\n};\ntemplate.defaults.imports.dateFormat = (date: Date) => {\n return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });\n};\n\n\n// 4. Compile the template (recommended for performance in production)\nconst render = template.compile(templateString);\n\n// 5. Define data\nconst data = {\n title: 'Art Template Example',\n name: 'world',\n items: ['apple', 'banana', 'orange'],\n showFooter: true,\n date: new Date(),\n rawHtml: 'This is bold!'\n};\n\n// 6. Render the template with data\nconst output = render(data);\nconsole.log(output);\n\n// You can also render directly without pre-compiling for simple cases (less efficient)\nconst directOutput = template(templateString, {\n title: 'Direct Render Example',\n name: 'test',\n items: ['one', 'two'],\n showFooter: false,\n date: new Date(),\n rawHtml: 'Italic!'\n});\n// console.log(directOutput);\n","lang":"typescript","description":"This quickstart demonstrates how to set up `art-template` with global defaults, register custom filters, compile a template string, and render it with provided data. It showcases basic templating features like variable output, looping, conditionals, and raw HTML output."},"warnings":[{"fix":"Update template files to use standard JavaScript expressions for helper calls, as the v3 `{{helper args}}` syntax is deprecated. For example, change `{{helper args}}` to `{{ helper.func(args) }}`.","message":"The `{{helper args}}` syntax for calling helper methods from art-template v3 is no longer compatible. Migrate to the standard JavaScript expression syntax for helpers.","severity":"breaking","affected_versions":">=4.10.0"},{"fix":"If you relied on template errors being suppressed or handled differently, explicitly set `template.defaults.bail = false;` to revert to previous behavior or implement custom error handling.","message":"The `bail` option, which controls whether template compilation errors immediately throw an exception, now defaults to `true`. This means template errors will halt execution by default.","severity":"gotcha","affected_versions":">=4.12.1"},{"fix":"Ensure you are using `art-template` version `4.13.2` or higher to have the correct TypeScript definition files included in the package.","message":"TypeScript definition file (`index.d.ts`) was missing in versions up to `4.13.1`, leading to compilation errors or lack of type intelligence for TypeScript users.","severity":"gotcha","affected_versions":"<=4.13.1"},{"fix":"Upgrade to `art-template` version `4.13.1` or newer to resolve issues related to `window` being undefined in specific runtime contexts.","message":"In some runtime environments, particularly those with a global `window` object but not fully compliant browser APIs (like certain server-side rendering setups), versions prior to 4.13.1 could throw 'window is not defined' errors.","severity":"gotcha","affected_versions":"<=4.13.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to `art-template@4.13.1` or higher to resolve the issue.","cause":"A bug in `art-template` versions prior to `4.13.1` caused it to reference the global `window` object in non-browser environments, such as server-side rendering setups.","error":"ReferenceError: window is not defined"},{"fix":"Refactor template helper calls to use standard JavaScript expression syntax, e.g., `{{ helper.someHelper(args) }}` or `{{ someGlobalFunction(args) }}`.","cause":"Using the v3 `{{helper args}}` syntax for calling helper methods in `art-template` v4, which is no longer supported and throws a compilation error.","error":"Template compilation error: Helper 'someHelper' not found"},{"fix":"Upgrade `art-template` to version `4.13.2` or newer to ensure correct type definitions are included in your project.","cause":"Missing or incorrect TypeScript definition files (`index.d.ts`) were not shipped with `art-template` versions up to `4.13.1`, leading to TypeScript compilation errors.","error":"error TS2614: Module '\"art-template\"' has no exported member 'template'"}],"ecosystem":"npm"}