{"id":14986784,"url":"https://github.com/danakt/handlebars-to-jsx","last_synced_at":"2025-10-28T21:08:37.316Z","repository":{"id":33659514,"uuid":"156620920","full_name":"danakt/handlebars-to-jsx","owner":"danakt","description":"Converts Handlebars template to React component","archived":false,"fork":false,"pushed_at":"2024-01-19T05:56:17.000Z","size":587,"stargazers_count":57,"open_issues_count":6,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-09T04:51:26.106Z","etag":null,"topics":["converter","converting-handlebars-template","handlebars","handlebars-template","handlebars-to-jsx","handlebars-to-react","jsx","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danakt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-07T23:14:56.000Z","updated_at":"2024-06-20T09:19:59.000Z","dependencies_parsed_at":"2024-06-18T21:29:40.777Z","dependency_job_id":"99031b11-4040-41b0-9054-2123ca3afd0c","html_url":"https://github.com/danakt/handlebars-to-jsx","commit_stats":{"total_commits":89,"total_committers":6,"mean_commits":"14.833333333333334","dds":0.2247191011235955,"last_synced_commit":"5fb2da6392c63b450a6be12c0662f506dc23ded2"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danakt%2Fhandlebars-to-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danakt%2Fhandlebars-to-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danakt%2Fhandlebars-to-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danakt%2Fhandlebars-to-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danakt","download_url":"https://codeload.github.com/danakt/handlebars-to-jsx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230423559,"owners_count":18223435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["converter","converting-handlebars-template","handlebars","handlebars-template","handlebars-to-jsx","handlebars-to-react","jsx","react"],"created_at":"2024-09-24T14:13:32.856Z","updated_at":"2025-10-28T21:08:37.241Z","avatar_url":"https://github.com/danakt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Handlebars to JSX [![NPM](https://img.shields.io/npm/v/handlebars-to-jsx.svg?style=flat-square)](https://www.npmjs.com/package/handlebars-to-jsx) [![Build Status](https://img.shields.io/travis/danakt/handlebars-to-jsx.svg?style=flat-square)](https://travis-ci.org/danakt/handlebars-to-jsx)\n\nConverts Handlebars template to JSX-component. Uses [Glimmer VM](https://github.com/glimmerjs/glimmer-vm/) to parse Handlebars code to AST and [Babel](https://github.com/babel/babel/) to create JSX AST and generate code.\n\n## Installation\n\n```bash\n# via NPM\nnpm install handlebars-to-jsx\n\n# or Yarn\nyarn add handlebars-to-jsx\n```\n\n## Usage\n\nThe package only has one method `compile`. You can import it the following way:\n\n```js\nimport { compile } from 'handlebars-to-jsx'\n```\n\nThe method has the following syntax:\n\n```\ncompile(input[, options])\n```\n\n- `input`  \n  The Handlebars template which should be converted to JSX code.\n- `options` _Optional_  \n  Options is optional and can have the following properties:\n  - `isComponent` _Optional_  \n    The default is `true`. Should return JSX code wrapped as a function component.\n  - `isModule` _Optional_  \n    The default is `false`. Should return generated code exported as default.\n  - `includeImport` _Optional_  \n    The default is `false`. Should return generated code with React import at the top. Requires `isModule` to be true.\n\nUse it for simply converting Handlebars template to JSX code:\n\n```js\ncompile('\u003cdiv\u003e{{variable}}\u003c/div\u003e')\n\n// Result code\n// props =\u003e \u003cdiv\u003e{props.variable}\u003c/div\u003e\n```\n\nBy default the `compile` function returns a function component. You can convert Handlebars templates to JSX without wrapping them as arrow functions. In this variant, `props` is not added to the path of variables.\n\n```js\ncompile('\u003cdiv\u003e{{variable}}\u003c/div\u003e', { isComponent: false })\n\n// Result\n// \u003cdiv\u003e{variable}\u003c/div\u003e\n```\n\nAlso, you can have the component exported as default:\n\n```js\ncompile('\u003cdiv\u003e{{variable}}\u003c/div\u003e', { isModule: true })\n\n// Result\n// export default props =\u003e \u003cdiv\u003e{props.variable}\u003c/div\u003e\n```\n\nAlso, react can be imported:\n\n```js\ncompile('\u003cdiv\u003e{{variable}}\u003c/div\u003e', { includeImport: true, isModule: true })\n\n// Result\n// import React from \"react\";\n// export default props =\u003e \u003cdiv\u003e{props.variable}\u003c/div\u003e\n```\n\n## Code formatting\n\nThe output code is created from an AST tree, so it's unformatted by default. You can use tools like [Prettier](https://prettier.io/docs/en/api.html) to format the code:\n\n```js\nimport { compile } from 'handlebars-to-jsx'\nimport prettier from 'prettier'\n\n// The Handlebars input\nconst hbsCode = '\u003cdiv\u003e{{#each list}}\u003cspan\u003e{{item}}\u003c/span\u003e{{/each}}\u003c/div\u003e'\n\nconst jsxCode = compile(hbsCode, { isComponent: false })\n// \u003cdiv\u003e{list.map((item, i) =\u003e \u003cspan key={i}\u003e{item.item}\u003c/span\u003e)}\u003c/div\u003e;\n\nprettier.format(jsxCode, { parser: 'babylon' })\n// \u003cdiv\u003e\n//   {list.map((item, i) =\u003e (\n//     \u003cspan key={i}\u003e{item.item}\u003c/span\u003e\n//   ))}\n// \u003c/div\u003e;\n```\n\n## Transpilation\n\nIf you want to have code lower than ES6, or you want to have the React source JS code without JSX, you can use [babel](https://github.com/babel/babel):\n\n```js\nimport { compile } from 'handlebars-to-jsx'\nimport babel from '@babel/core'\nimport pluginTransformReactJSX from '@babel/plugin-transform-react-jsx'\n\n// The Handlebars input\nconst hbsCode = '\u003cdiv\u003e{{variable}}\u003c/div\u003e'\n\nconst jsxCode = compile(hbsCode, { isComponent: false })\n// \u003cdiv\u003e{variable}\u003c/div\u003e;\n\nconst { code } = babel.transform(jsxCode, {\n  plugins: [pluginTransformReactJSX]\n})\n// React.createElement(\"div\", null, variable);\n```\n\n## License\n\nMIT licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanakt%2Fhandlebars-to-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanakt%2Fhandlebars-to-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanakt%2Fhandlebars-to-jsx/lists"}