{"id":28247880,"url":"https://github.com/wurdcms/wurd-react","last_synced_at":"2026-04-01T16:57:27.404Z","repository":{"id":52977475,"uuid":"95330830","full_name":"wurdcms/wurd-react","owner":"wurdcms","description":"Components for integrating the Wurd CMS in a React app","archived":false,"fork":false,"pushed_at":"2022-09-22T11:30:21.000Z","size":2309,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-27T23:42:06.172Z","etag":null,"topics":["cms","cms-module","headless-cms","react","react-component","reactjs","wurd"],"latest_commit_sha":null,"homepage":null,"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/wurdcms.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":"2017-06-25T01:02:26.000Z","updated_at":"2025-09-27T04:47:39.000Z","dependencies_parsed_at":"2022-08-26T08:31:13.398Z","dependency_job_id":null,"html_url":"https://github.com/wurdcms/wurd-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wurdcms/wurd-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wurdcms%2Fwurd-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wurdcms%2Fwurd-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wurdcms%2Fwurd-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wurdcms%2Fwurd-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wurdcms","download_url":"https://codeload.github.com/wurdcms/wurd-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wurdcms%2Fwurd-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"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":["cms","cms-module","headless-cms","react","react-component","reactjs","wurd"],"created_at":"2025-05-19T11:11:28.046Z","updated_at":"2026-04-01T16:57:27.396Z","avatar_url":"https://github.com/wurdcms.png","language":"JavaScript","readme":"# React components for the Wurd CMS\nWurd is a service that lets you integrate a CMS into any website or app in minutes.  This module provides components for integrating content and inline editing into your React app as easily as possible.\n\n\n## Example\n```jsx\nimport wurd from 'wurd-react';\nimport { marked } from 'marked';\n\nwurd.connect('my-app', {\n  editMode: true,\n  markdown: marked, // Optional for enabling markdown() mode\n});\n\nwurd.load('shared,homepage')\n  .then(content =\u003e {\n    //Access content via getters\n    document.title = content.text('homepage.title');\n\n    //Use blocks for accessing subsections of content\n    const page = content.block('homepage');\n\n    ReactDOM.render(\n      \u003cdiv\u003e\n        \u003ch1\u003e\u003ccontent.Text id=\"shared.company\" /\u003e\u003c/h1\u003e\n\n        \u003ch2\u003e\u003cpage.Text id=\"title\" /\u003e\u003c/h2\u003e\n\n        \u003cpage.Image id=\"hero.image\" width=\"300\" /\u003e\n        \u003cpage.Text id=\"hero.title\" /\u003e\n      \u003c/div\u003e, \n      document.getElementById('root')\n    );\n  });\n```\n\nSee more in the [examples](https://github.com/wurdcms/wurd-react/tree/master/examples) folder or run them with `npm run example`.\n\n\n## Installation\nUsing NPM:\n```\nnpm install wurd-react\n```\n\n## Usage\n1. Create a Wurd account and app\n2. Connect to a Wurd app with `wurd.connect('appName', {editMode: true})`\n3. Load top level 'sections' of content you'll be using with `wurd.load('section')`\n4. In your views/templates etc., use the provided components to integrate content and editing functionality: `\u003cWurdText id=\"section.title\"/\u003e`\n\n\n## Components\n### Text\nCreates an editable text region.\n\n![WurdText example](https://wurdcms.github.io/images/text-vars.gif)\n\n```jsx\n\u003ccontent.Text\n  id=\"title\",             // Required\n  type=\"h1\",              // Defaults to `span` \n  vars={{name: 'John'}},  // Replaces mustache style tokens (e.g. `{{name}}`) with the given data\n  // Other standard props (className, style etc.) can be passed too\n/\u003e\n```\n\n### Image\nCreates an editable image (`\u003cimg\u003e`).\n\n![WurdImage example](https://wurdcms.github.io/images/image.gif)\n\n```jsx\n\u003ccontent.Image\n  id=\"hero.image\",     //Required\n  // Other standard props (className, style etc.) can be passed too\n/\u003e\n```\n\n### Markdown\nCreates an editable text region that displays formatted Markdown.\n\nNOTE: This uses dangerouslySetInnerHTML, [read up on it here](https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml).\n\n![WurdMarkdown example](https://wurdcms.github.io/images/markdown.gif)\n\n```jsx\n\u003ccontent.Markdown\n  id=\"home.intro\",        // Required\n  type=\"div\",             // Defaults to `div`\n  vars={{name: 'John'}},  // Replaces mustache style tokens (e.g. `{{name}}`) with the given data\n  // Other standard props (className, style etc.) can be passed too\n/\u003e\n```\n\n### List\nCreates an editable list of content. The children passed will represent an item in the list.\n\n```jsx\n\u003ccontent.List \n  id=\"team.members\"       //Required\n  keys=\"name\"             //At least 1 property of the list item\n\u003e\n  {item =\u003e \n    \u003cli key={item.id()}\u003e\n      \u003citem.Image id=\"pic\" width=\"50\" /\u003e\n      \u003citem.Text id=\"name\" /\u003e\n    \u003c/li\u003e\n  }\n\u003c/content.List\u003e\n```\n\n\n### Object\nAllows editing a section of content, (like the properties of an object).\n\nThis editor is useful for:\n- Off-page content such as metadata\n- The content of complex page elements such as dropdowns, modals and popovers\n- Editing many properties at once\n\n```jsx\n\u003ccontent.Object\n  id=\"meta\"\n  keys=\"title,description\" // Required; will define with items can be edited\n  type=\"span\"              // Defaults to `div`\n  // Other standard props (className, style etc.) can be passed too\n/\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwurdcms%2Fwurd-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwurdcms%2Fwurd-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwurdcms%2Fwurd-react/lists"}