{"id":20054389,"url":"https://github.com/divriots/universal-story-render","last_synced_at":"2025-08-21T12:11:33.932Z","repository":{"id":39626723,"uuid":"383092787","full_name":"divriots/universal-story-render","owner":"divriots","description":"Universal story renderer, compatible with most JS UI frameworks out there.","archived":false,"fork":false,"pushed_at":"2022-05-30T14:56:33.000Z","size":20,"stargazers_count":23,"open_issues_count":1,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-04T07:45:58.563Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://components.studio/view/SX8bfi6VKU5FdIMUa8jK","language":"TypeScript","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/divriots.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-05T09:56:09.000Z","updated_at":"2025-02-18T19:11:25.000Z","dependencies_parsed_at":"2022-08-20T17:10:40.836Z","dependency_job_id":null,"html_url":"https://github.com/divriots/universal-story-render","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Funiversal-story-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Funiversal-story-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Funiversal-story-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Funiversal-story-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/universal-story-render/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252420852,"owners_count":21745143,"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-11-13T12:40:17.184Z","updated_at":"2025-05-05T13:31:24.223Z","avatar_url":"https://github.com/divriots.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Universal story renderer\n\nThis tiny library dynamically discovers the type (UI elements only) of a given JS object using typical frameworks signatures.\nIt also supports rendering of that object.\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n\n## Install\n\nThis project uses [npm](https://npmjs.com). Go check them out if you don't have them locally installed.\n\n```sh\n$ npm install --save @divriots/universal-story-render\n```\n\n## Usage\n\n```js\n// using React jsx\nimport { typeOf, render } from \"@divriots/universal-story-render\";\nimport ReactDOM from \"react-dom\";\n\nconsole.log(typeOf(\u003cdiv /\u003e)); // React\nrender(() =\u003e ReactDOM, \u003cdiv /\u003e, \"React\", div);\n```\n\n## Supported component types\n\n| Library          | typeOf value            | dynamic required render library |\n| ---------------- | ----------------------- | ------------------------------- |\n| React            | `React`                 | `react-dom`                     |\n| Preact           | `Preact`                | `preact`                        |\n| Stencil          | `Stencil`               | `@stencil/core/internal/client` |\n| Omi              | `Omi`                   | `omi`                           |\n| Riot             | `Riot`\\|`RiotStory`     | `riot`                          |\n| Svelte           | `Svelte`\\|`SvelteStory` | none                            |\n| Vue              | `Vue`                   | `vue`                           |\n| Solid            | `Solid`                 | `solid-js/dom`                  |\n| Fast             | `ViewTemplate`          | none                            |\n| Lit              | `TemplateResult`        | `lit-html`                      |\n| LWC              | `Lwc`                   | `lwc`                           |\n| uhtml            | `Hole`                  | `uhtml`                         |\n| lighterhtml      | `LighterHole`           | `lighterhtml`                   |\n| DOM              | `Element`               | none                            |\n| DocumentFragment | `DocumentFragment`      | none                            |\n| Iterable         | `Iterable`              | none                            |\n| Angular          | `Angular`               | `@angular/platform-browser-dynamic`, `@angular/core`, `@angular/platform-browser` |\n\n## Explicit type\n\nIf the passed object/function has a String property `_$story_type$`, its value will be used as type (no guessing)\n\n## Custom renderers\n\nOn top of framework renderers, this library also support 2 custom renderers (which can be used with above `_$story_type$` property):\n\n### `RenderProp`\n```\nconst obj = {\n  render(div) {\n    // ...\n  }\n}\nrender(null, obj, \"RenderProp\", div);\n```\n\n### `RenderFn`\n```\nconst obj = function render(div) {\n  // ...\n}\nrender(null, obj, \"RenderFn\", div);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Funiversal-story-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Funiversal-story-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Funiversal-story-render/lists"}