{"id":13687749,"url":"https://github.com/dylibso/reactables","last_synced_at":"2025-04-30T22:04:01.569Z","repository":{"id":213441046,"uuid":"729323929","full_name":"dylibso/reactables","owner":"dylibso","description":"Reactables enable you to bring the power of React and JSX outside of the JavaScript ecosystem. ","archived":false,"fork":false,"pushed_at":"2025-02-11T18:00:43.000Z","size":491,"stargazers_count":51,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-30T20:22:56.769Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dylibso.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":"2023-12-08T22:44:23.000Z","updated_at":"2025-02-26T05:46:25.000Z","dependencies_parsed_at":"2024-02-08T03:45:15.603Z","dependency_job_id":null,"html_url":"https://github.com/dylibso/reactables","commit_stats":null,"previous_names":["dylibso/reactables"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylibso%2Freactables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylibso%2Freactables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylibso%2Freactables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylibso%2Freactables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dylibso","download_url":"https://codeload.github.com/dylibso/reactables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251789612,"owners_count":21644085,"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-08-02T15:00:59.827Z","updated_at":"2025-04-30T22:04:01.527Z","avatar_url":"https://github.com/dylibso.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cp align=\"center\"\u003e\n      \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\".github/assets/reactables-wasm.png\"\u003e\n          \u003cimg alt=\"Reactables by Dylibso\" width=\"75%\" style=\"max-width: 600px\" src=\".github/assets/reactables-wasm.png\"\u003e\n      \u003c/picture\u003e\n    \u003c/p\u003e\n    \u003ch1 style=\"text-align: center;\"\u003eShrinkwrapped, Portable, \u003cspan\u003e\u0026#38;\u003c/span\u003e Secure React Components\u003c/h1\u003e\n    \n[Why](#why-reactables) · [Use Cases](#use-cases) · [Usage](#usage) · [Request Feature](https://github.com/dylibso/reactables/issues/new)\n\n\u003c/div\u003e\n\nReactables bring the power of React and JSX to everyone's programming language of choice.\nCompile and render JSX templates securely from over 15 different programming languages including Python, Go, Java, Ruby, .NET, PHP, and more!\n\n\u003cp align=\"left\"\u003e\n \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\".github/assets/reactables-diagram.png\"\u003e\n      \u003cimg alt=\"Reactables by Dylibso\" width=\"100%\" src=\".github/assets/reactables-diagram.png\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n## Why Reactables?\n\nThere are many embeddable templating languages (e.g., Handlebars.js, Mustache, Liquid, etc.) in the world today, but all suffer from a few shortcomings:\n\n- They lack expressivity and complexity turns messy (ie. non Turing-complete languages)\n- They can be unfamiliar to many users and come with a non-zero learning curve\n- They require users to leave all of their pre-built components behind and start from scratch\n- They are incompatible with popular web development tools (e.g. Webpack, ESBuild, etc.)\n\nIn an ideal world, React/JSX could be used as a general purpose template engine and all of the above limitations would fade\naway, but alas:\n\n- You can only embed in JavaScript. What if your code base is written in something else or you have multiple languages?\n- What if your JSX templates are provided by a third party? That's not very secure...\n\nEnter Reactables! These happen to be the two primary problems that [Extism](https://extism.org) aims to solve.\nReactables is distributed as an [Extism Plug-in](https://extism.org/docs/concepts/plug-in), so you can now compile and render React/JSX **safely** from within your programming language of choice.\n\n## Use Cases\n\n1. Your entire codebase is written in `\u003cany_language_other_than_JavaScript\u003e` but you really want/need to render templates with JSX\n2. You're a SaaS platform and you want to give your customers the ability to customize various artifacts and touch points such as hosted pages, emails, and PDFs. \n\n## Features\n\n- Run arbritrary JavaScript / JSX in your code **securely**!\n- Suport for over 15 different host programming languages\n- Incorporate your favorite tooling, styling, and NPM packages (experimental)\n- Package up a full blown JSX app using ESBuild or Webpack\n- Build and distribute new Reactables from your component library. They're customizable and portable!\n\n## Ready to Consume\n\n**Choose from pre-built Reactables that are ready to go out-of-the-box for your immediate enjoyment.** Each Reactable is implemented as \na WebAssembly Module in the form of an [Extism Plugin](https://extism.org/docs/concepts/plug-in) that embeds React and other dependencies along with an interface to compile JSX templates and render them with supplied props. \n\n- **Reactable Core** provides a foundational plugin with React securely embedded to provide the core JSX compilation and rendering capabilities. Get it [here](https://github.com/dylibso/reactables/releases)\n\n### Coming Soon\n- **Reactable Email** extends Reactable Core with components from [react-email](https://github.com/resendlabs/react-email) \n- **Reactable PDF** extends Reactable Core  with components from [react-pdf](https://github.com/diegomura/react-pdf) \n\n## Usage\n\n1. Include the appropriate [Extism SDK](https://extism.org/docs/quickstart/host-quickstart) into your application \n2. Instantiate your Reactable of choice as a new Extism Plugin \n3. Call the `compileTemplate` function with your JSX template\n4. Call the `render` function with your props\n5. Voila!\n\n### Example (Python)\n\nThe following example embeds Reactable Core in a Python program to render a simple a JSX template with a customer name property. \nSee the [examples directory](examples/) for examples in more languages.\n\n```python\nimport extism\nimport json\n\nplugin_url = \"https://github.com/dylibso/reactables/releases/latest/download/reactable.core.wasm\"\nmanifest = { \"wasm\": [ { \"url\": plugin_url } ] }\nreactable = extism.Plugin(manifest, wasi=True)\n\n# Take our JSX code as a string\njsx_code = \"\"\"\nfunction App(props) {\n  return \u003ch1\u003eHello, {props.customerName}!\u003c/h1\u003e\n}\n\"\"\"\n\n# Compile the template and register it by name\nreactable.call('compileTemplate', json.dumps({\n            \"name\": \"greeting-template\",\n            \"code\": jsx_code,\n            }))\n\n# Render template by name, passing in some props\nprops = { \"customerName\": \"Benjamin\" }\nhtml = reactable.call('render', json.dumps({\n            \"name\": \"greeting-template\",\n            \"props\": props,\n            }))\n\nprint(html)\n# \u003ch1\u003eHello, Benjamin!\u003c/h1\u003e\n```\n\n## Build your own \n\nReactable Core can be extended to create new and novel Reactables that incorporate other components, styles, packages, etc.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdylibso%2Freactables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdylibso%2Freactables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdylibso%2Freactables/lists"}