{"id":13445584,"url":"https://facebook.github.io/jsx/","last_synced_at":"2025-03-20T21:30:53.761Z","repository":{"id":20170241,"uuid":"23441030","full_name":"facebook/jsx","owner":"facebook","description":"The JSX specification is a XML-like syntax extension to ECMAScript.","archived":false,"fork":false,"pushed_at":"2023-11-27T14:17:19.000Z","size":129,"stargazers_count":1965,"open_issues_count":52,"forks_count":132,"subscribers_count":87,"default_branch":"main","last_synced_at":"2024-10-08T09:41:42.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://facebook.github.io/jsx/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/facebook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-08-28T19:55:06.000Z","updated_at":"2024-10-08T00:55:32.000Z","dependencies_parsed_at":"2024-01-10T19:10:09.343Z","dependency_job_id":null,"html_url":"https://github.com/facebook/jsx","commit_stats":{"total_commits":69,"total_committers":29,"mean_commits":"2.3793103448275863","dds":0.782608695652174,"last_synced_commit":"d614ce76e6ea996ea6dfa122f2a7be71ed96e6eb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebook%2Fjsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebook%2Fjsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebook%2Fjsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebook%2Fjsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/facebook","download_url":"https://codeload.github.com/facebook/jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221807739,"owners_count":16883639,"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":[],"created_at":"2024-07-31T05:00:36.202Z","updated_at":"2025-03-20T21:30:53.753Z","avatar_url":"https://github.com/facebook.png","language":"HTML","funding_links":[],"categories":["Building parts","Resources"],"sub_categories":["Official Resources"],"readme":"DRAFT: JSX Specification\n========================\n[![Support Ukraine](https://img.shields.io/badge/Support-Ukraine-FFD500?style=flat\u0026labelColor=005BBB)](https://opensource.fb.com/support-ukraine)\n\n[**See spec text with grammar here**](https://facebook.github.io/jsx).\n\nJSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. __It's NOT a proposal to incorporate JSX into the ECMAScript spec itself.__ It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript. \n\n```jsx\n// Using JSX to express UI components.\nvar dropdown =\n  \u003cDropdown\u003e\n    A dropdown list\n    \u003cMenu\u003e\n      \u003cMenuItem\u003eDo Something\u003c/MenuItem\u003e\n      \u003cMenuItem\u003eDo Something Fun!\u003c/MenuItem\u003e\n      \u003cMenuItem\u003eDo Something Else\u003c/MenuItem\u003e\n    \u003c/Menu\u003e\n  \u003c/Dropdown\u003e;\n\nrender(dropdown);\n```\n\nRationale\n---------\n\nThe purpose of this specification is to define a concise and familiar syntax for defining tree structures with attributes. A generic but well defined syntax enables a community of independent parsers and syntax highlighters to conform to a single specification.\n\nEmbedding a new syntax in an existing language is a risky venture. Other syntax implementors or the existing language may introduce another incompatible syntax extension.\n\nThrough a stand-alone specification, we make it easier for implementors of other syntax extensions to consider JSX when designing their own syntax. This will hopefully allow various new syntax extensions to co-exist.\n\nIt is our intention to claim minimal syntactic real estate while keeping the syntax concise and familiar. That way we leave the door open for other extensions.\n\nThis specification does not attempt to comply with any XML or HTML specification. JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity.\n\n\nWhy not Template Literals?\n--------------------------\n\n[ECMAScript 6th Edition (ECMA-262)](https://www.ecma-international.org/ecma-262/8.0/index.html) introduces template literals which are intended to be used for embedding DSL in ECMAScript. Why not just use that instead of inventing a syntax that's not part of ECMAScript?\n\nTemplate literals work well for long embedded DSLs. Unfortunately the syntax noise is substantial when you exit in and out of embedded arbitrary ECMAScript expressions with identifiers in scope.\n\n```jsx\n// Template Literals\nvar box = jsx`\n  \u003c${Box}\u003e\n    ${\n      shouldShowAnswer(user) ?\n      jsx`\u003c${Answer} value=${false}\u003eno\u003c/${Answer}\u003e` :\n      jsx`\n        \u003c${Box.Comment}\u003e\n         Text Content\n        \u003c/${Box.Comment}\u003e\n      `\n    }\n  \u003c/${Box}\u003e\n`;\n```\n\nIt would be possible to use template literals as a syntactic entry point and change the semantics inside the template literal to allow embedded scripts that can be evaluated in scope:\n\n```jsx\n// Template Literals with embedded JSX\nvar box = jsx`\n  \u003cBox\u003e\n    {\n      shouldShowAnswer(user) ?\n      \u003cAnswer value={false}\u003eno\u003c/Answer\u003e :\n      \u003cBox.Comment\u003e\n         Text Content\n      \u003c/Box.Comment\u003e\n    }\n  \u003c/Box\u003e\n`;\n```\n\nHowever, this would lead to further divergence. Tooling that is built around the assumptions imposed by template literals wouldn't work. It would undermine the meaning of template literals. It would be necessary to define how JSX behaves within the rest of the ECMAScript grammar within the template literal anyway.\n\nTherefore it's better to introduce JSX as an entirely new type of PrimaryExpression:\n\n```jsx\n// JSX\nvar box =\n  \u003cBox\u003e\n    {\n      shouldShowAnswer(user) ?\n      \u003cAnswer value={false}\u003eno\u003c/Answer\u003e :\n      \u003cBox.Comment\u003e\n         Text Content\n      \u003c/Box.Comment\u003e\n    }\n  \u003c/Box\u003e;\n```\n\nWhy not JXON?\n-------------\n\nAnother alternative would be to use object initializers (similar to [JXON](https://htmlpreview.github.io/?https://github.com/mdn/archived-content/blob/main/files/en-us/archive/jxon/raw.html)). Unfortunately, the balanced braces do not give great syntactic hints for where an element starts and ends in large trees. Balanced named tags is a critical syntactic feature of the XML-style notation.\n\nPrior Art\n---------\n\nThe JSX syntax is similar to the [E4X Specification (ECMA-357)](http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/Ecma-357.pdf). E4X is a deprecated specification with deep reaching semantic meaning. JSX partially overlaps with a tiny subset of the E4X syntax. However, JSX has no relation to the E4X specification.\n\n\nContributing\n------------\n\nThe main purpose of this repository is to continue evolving JSX. We are grateful to the community for contributing bugfixes and improvements.\n\n### [Code of Conduct](https://code.fb.com/codeofconduct)\n\nMeta has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.\n\n### [Contribute Guide](./CONTRIBUTING.md)\n\nRead our [**Contributing Guide**](./CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to JSX.\n\n\nLicense\n-------\n\nCopyright (c) 2014 - present, Meta Platform, Inc.\nAll rights reserved.\n\nThis work is licensed under a [Creative Commons Attribution 4.0\nInternational License](http://creativecommons.org/licenses/by/4.0/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/facebook.github.io%2Fjsx%2F","html_url":"https://awesome.ecosyste.ms/projects/facebook.github.io%2Fjsx%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/facebook.github.io%2Fjsx%2F/lists"}