{"id":15084200,"url":"https://github.com/oscarotero/ssx","last_synced_at":"2025-06-13T17:35:41.761Z","repository":{"id":249320409,"uuid":"829160021","full_name":"oscarotero/ssx","owner":"oscarotero","description":"Fast and simple JSX library for server side","archived":false,"fork":false,"pushed_at":"2025-03-27T12:21:35.000Z","size":320,"stargazers_count":26,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T23:14:04.991Z","etag":null,"topics":["deno","jsx"],"latest_commit_sha":null,"homepage":"https://deno.land/x/ssx","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/oscarotero.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-07-15T22:06:31.000Z","updated_at":"2025-03-27T12:21:24.000Z","dependencies_parsed_at":"2025-03-15T18:34:24.112Z","dependency_job_id":null,"html_url":"https://github.com/oscarotero/ssx","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"0b5fea101811ec892b24f38067f07dd364431ec7"},"previous_names":["oscarotero/ssx"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarotero%2Fssx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarotero%2Fssx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarotero%2Fssx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarotero%2Fssx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oscarotero","download_url":"https://codeload.github.com/oscarotero/ssx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312135,"owners_count":21082638,"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":["deno","jsx"],"created_at":"2024-09-25T07:00:36.076Z","updated_at":"2025-06-13T17:35:41.747Z","avatar_url":"https://github.com/oscarotero.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SSX\n\nJSX is terrible for frontend. But it's an acceptable way to create HTML code in\nserver side, specially if it's supported by default by TypeScript and Deno.\n\nMost of the current JSX libraries are designed to work in server and client\nsides. They do complicated things like a virtual DOM, reactivity, hooks,\nhydration, events, etc, in order to create interactive user interfaces.\n\nSSX is a minimal JSX library designed to be used ONLY in server side and output\nplain HTML code.\n\n- Created in TypeScript, for Deno.\n- Very fast. It's compatible with the\n  [`precompile` option](https://deno.com/blog/v1.38#fastest-jsx-transform)\n  available in Deno.\n  \u003e 7-20x faster rendering times and a 50% reduction in Garbage Collection\n  \u003e times.\n- Run `deno task bench` to compare SSX with React, Hono and Preact.\n- Designed to output HTML. It uses real HTML attributes (no more `className`).\n- Great HTML and CSS documentation. Every element and property has a description\n  and even links to [MDN documentation](https://developer.mozilla.org/). Types\n  are generated using the data from\n  [VSCode Custom Data](https://github.com/microsoft/vscode-custom-data).\n- It supports async components (components returning a Promise).\n- Allows to insert raw HTML code easily (without patronizing you).\n- You can add the `\u003c!doctype html\u003e` declaration.\n\n## Configuration\n\nIn your `deno.json` file:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"ssx\"\n  },\n  \"imports\": {\n    \"ssx/jsx-runtime\": \"https://deno.land/x/ssx/jsx-runtime.ts\"\n  }\n}\n```\n\nAlternatively, you can use\n[JsDelivr as CDN](https://cdn.jsdelivr.net/gh/oscarotero/ssx/).\n\n## Using NPM specifier\n\nSSX is also\n[published on NPM as `@lumeland/ssx`](https://www.npmjs.com/package/@lumeland/ssx):\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"npm:@lumeland/ssx\"\n  }\n}\n```\n\n## Use with Node and Bun\n\nIf you want to use SSX with Node.js or Bun, see the `/node` folder for an\nexample setup using this package in a Node environment.\n\n## Example:\n\n```jsx\n// Main component\nfunction Main() {\n  return (\n    \u003cdiv id=\"main\"\u003e\n      \u003cHeader\u003e\n        \u003cp\u003eWelcome to SSX\u003c/p\u003e\n        {{ __html: \"Raw \u003cb\u003eHTML\u003c/b\u003e code\" }}\n      \u003c/Header\u003e\n    \u003c/div\u003e\n  );\n}\n\n// Async component\nasync function Header({ children }: { children: JSX.Children }) {\n  const res = await fetch(\n    `https://api.dictionaryapi.dev/api/v2/entries/en/${name}`,\n  );\n\n  const json = await res.json();\n  const def = json[0]?.meanings[0]?.definitions[0]?.definition;\n\n  return (\n    \u003c\u003e\n      \u003ch2\u003eDefinition of {name}:\u003c/h2\u003e\n      \u003cp\u003e{def || \"Definition not found\"}\u003c/p\u003e\n      {children}\n    \u003c/\u003e\n  );\n}\n\n// String with the HTML code\nconsole.log(await Main());\n```\n\n### Adding Doctype:\n\nAny child with the shape `{ __html: string }` is treated as raw HTML and will\nnot be escaped. This allows you to insert the `\u003c!doctype html\u003e` declaration\ndirectly (something not possible in other JSX libraries):\n\n```html\n{{ __html: \"\u003c!DOCTYPE html\u003e\" }}\n\u003chtml\u003e\n  ...\n\u003c/html\u003e;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarotero%2Fssx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foscarotero%2Fssx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarotero%2Fssx/lists"}