{"id":15667692,"url":"https://github.com/mikhail-ev/stringify-jsx","last_synced_at":"2026-01-19T23:01:49.788Z","repository":{"id":46918007,"uuid":"212764547","full_name":"mikhail-ev/stringify-jsx","owner":"mikhail-ev","description":"JSX adaptation as a template system for non-React projects","archived":false,"fork":false,"pushed_at":"2023-01-04T22:57:44.000Z","size":273,"stargazers_count":1,"open_issues_count":13,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-08T19:23:49.508Z","etag":null,"topics":["html","jsx","jsx-adaptation","mustache","react","stringify-jsx","templates"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mikhail-ev.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}},"created_at":"2019-10-04T08:00:57.000Z","updated_at":"2022-08-30T17:19:37.000Z","dependencies_parsed_at":"2023-02-02T23:02:10.951Z","dependency_job_id":null,"html_url":"https://github.com/mikhail-ev/stringify-jsx","commit_stats":null,"previous_names":["targettaiga/stringify-jsx"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/mikhail-ev/stringify-jsx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikhail-ev%2Fstringify-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikhail-ev%2Fstringify-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikhail-ev%2Fstringify-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikhail-ev%2Fstringify-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikhail-ev","download_url":"https://codeload.github.com/mikhail-ev/stringify-jsx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikhail-ev%2Fstringify-jsx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28588968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T20:45:59.482Z","status":"ssl_error","status_checked_at":"2026-01-19T20:45:41.500Z","response_time":67,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["html","jsx","jsx-adaptation","mustache","react","stringify-jsx","templates"],"created_at":"2024-10-03T14:04:56.098Z","updated_at":"2026-01-19T23:01:49.754Z","avatar_url":"https://github.com/mikhail-ev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stringify-jsx\nJSX adaptation as a template system for non-React projects. Allowing to use JSX as a template everywhere adopting IDE's JSX highlight and formatting features.\n\n## TLDR;\nTransforming JSX:\n```jsx harmony\nclass MyElement {\n    render() {\n        let title = \"Hello World!\";\n        return \u003cdiv\u003e{title}\u003c/div\u003e;\n    }\n}\n```\nInto this:\n```js\nclass MyElement {\n    render() {\n        let title = \"Hello World!\";\n        return `\u003cdiv\u003e${title}\u003c/div\u003e`;\n    }\n}\n```\n\nAlso by default transforms JSX html attributes:\n```jsx harmony\nclass MyElement {\n    render() {\n        let myClass = \"action\";\n        return \u003clabel className={myClass} htmlFor=\"button\"\u003e\u003c/label\u003e;\n    }\n}\n```\nInto regular html:\n```js\nclass MyElement {\n    render() {\n        let myClass = \"action\";\n        return `\u003clabel class=\"${myClass}\" for=\"button\"\u003e\u003c/label\u003e`;\n    }\n}\n```\n\n## Quick start\n```\nnpm i stringify-jsx\n```\n```js\nstringifyJsx('let title = \"Hello World!\";let html = \u003cdiv\u003e{title}\u003c/div\u003e;').code\n// let title = \"Hello World!\";let html = `\u003cdiv\u003e${title}\u003c/div\u003e`;\n```\n[Usage examples](https://github.com/TargetTaiga/rollup-plugin-stringify-jsx/tree/master/example)\n\n## Options\n```js\nstringifyJsx('\u003cdiv\u003e\u003c/div\u003e', {\n    // Preserve whitespaces between tags, default =\u003e false\n    preserveWhitespace: false,\n    // Custom attributes replacement functionality \n    customAttributeReplacements: {},\n    customAttributeReplacementFn: void 0\n}, { /* babel options */ })\n```\nRead more about [babel configuration](https://babeljs.io/docs/en/options).\n\n## Custom attributes replacement\nPass ``customAttributeReplacements`` or ``customAttributeReplacementFn`` to options to adjust replacements. If ``customAttributeReplacementFn`` is passed ``customAttributeReplacements`` is ignored.\n\n#### customAttributeReplacements\n```js\nstringifyJsx('\u003cdiv className=\"myClass\" value=\"hello world!\"\u003e\u003c/div\u003e', {\n    customAttributeReplacements: {\n        'value': 'data-value'\n    }\n}).code\n// `\u003cdiv class=\"myClass\" data-value=\"hello world!\"\u003e\u003c/div\u003e`;\n```\n\n#### customAttributeReplacementFn\n```js\nstringifyJsx('\u003cdiv className=\"myClass\" value=\"hello world!\"\u003e\u003c/div\u003e', {\n    customAttributeReplacementFn: (nodePath, defaultReplacement) =\u003e {\n        if (defaultReplacement) {\n            return defaultReplacement;\n        }\n        return 'x-' + nodePath.node.name;\n    }\n}).code\n// `\u003cdiv class=\"myClass\" x-value=\"hello world!\"\u003e\u003c/div\u003e`\n```\n``nodePath`` is a [@babel/traverse's path](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#paths). \n``defaultReplacement`` is a default transformation (such as className =\u003e class, htmlFor =\u003e html).\n\n## Source maps\nCode and source maps are being generated by [@babel/generator](https://babeljs.io/docs/en/babel-generator). By default source map generation is turned off, to turn it on additional option should be provided:\n```js\nstringifyJsx('let title = \"Hello World!\";let html = \u003cdiv\u003e{title}\u003c/div\u003e;', {}, {\n    sourceMaps: 'inline'\n}).code\n// let title = \"Hello World!\";\n// let html = `\u003cdiv\u003e${title}\u003c/div\u003e`;\n// //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVua25vd24iXSwibmFtZXMiOlsidGl0bGUiLCJodG1sIl0sIm1hcHBpbmdzIjoiQUFBQSxJQUFJQSxLQUFLLEdBQUcsY0FBWjtBQUEyQixJQUFJQyxJQUFJLHdCQUFSIiwic291cmNlc0NvbnRlbnQiOlsibGV0IHRpdGxlID0gXCJIZWxsbyBXb3JsZCFcIjtsZXQgaHRtbCA9IDxkaXY+e3RpdGxlfTwvZGl2PjsiXX0=\n```\n\n## Tagged templates ambiguity\nTo provide an ability to use stringify-jsx with tagged template literals (and build upon it libraries like [lit-html](https://lit-html.polymer-project.org/)) all function calls that contain JSX markup as argument are being transformed into tagged template literals.\n\nThis call:\n```jsx harmony\nhtml(\u003cdiv\u003eJSX Markup!\u003c/div\u003e);\n```\nWill be transformed to:\n```js\nhtml`\u003cdiv\u003eJSX Markup!\u003c/div\u003e`; \n```\nIf it's necessary to pass string transformed from JSX as function argument - assign JSX to a variable first:\n```jsx harmony\nconst markup = \u003cdiv\u003eJSX Markup!\u003c/div\u003e;\nhtml(markup);\n```  \nSo function call in resulting code will remain unchanged:\n```js\nconst markup = `\u003cdiv\u003eJSX Markup!\u003c/div\u003e`;\nhtml(markup);\n``` \n\n## lit-html\nDue to support of tagged template literals and custom attribute replacements this tool can be used together with [lit-html](https://lit-html.polymer-project.org).\nExplore [example project](https://github.com/TargetTaiga/lit-project-template) for more information.\n\n## Notes\n* Does not modify self-closing tags \n\n## Babel plugin\nThe core of stringify-jsx was moved to [babel-plugin-transform-stringify-jsx](https://github.com/TargetTaiga/babel-plugin-transform-stringify-jsx). If inline usage is not necessary please consider using combination babel + babel-plugin-transform-stringify-jsx. Explore [example project](https://github.com/TargetTaiga/lit-project-template).\n\n## Other plugins\n* [rollup-plugin-stringify-jsx](https://github.com/TargetTaiga/rollup-plugin-stringify-jsx)\n\n## TODO\n- [x] Babel plugin\n- [x] Tests (babel-plugin contains core so tests are located there)\n- [ ] Typescript\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikhail-ev%2Fstringify-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikhail-ev%2Fstringify-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikhail-ev%2Fstringify-jsx/lists"}