{"id":21816590,"url":"https://github.com/5monkeys/djedi-json.js","last_synced_at":"2026-03-16T08:33:31.604Z","repository":{"id":42065736,"uuid":"374925854","full_name":"5monkeys/djedi-json.js","owner":"5monkeys","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-04T09:21:45.000Z","size":3069,"stargazers_count":0,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T15:21:18.441Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/5monkeys.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-08T07:46:13.000Z","updated_at":"2022-01-25T12:32:02.000Z","dependencies_parsed_at":"2024-11-27T15:46:42.369Z","dependency_job_id":null,"html_url":"https://github.com/5monkeys/djedi-json.js","commit_stats":{"total_commits":69,"total_committers":4,"mean_commits":17.25,"dds":"0.18840579710144922","last_synced_commit":"9b9b4c650882bbc6559ba98b1cb46e5c4147db99"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjedi-json.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjedi-json.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjedi-json.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fdjedi-json.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5monkeys","download_url":"https://codeload.github.com/5monkeys/djedi-json.js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804824,"owners_count":21164135,"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-27T15:35:25.651Z","updated_at":"2026-03-16T08:33:31.565Z","avatar_url":"https://github.com/5monkeys.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Djedi - JSON\n\nA easy way to create micro-admins using react components, saving the output\nas a JSON to be consumed in frontend.\n\nThis is a work in progress and needs some cleaning up and refactoring going forward.\n\n[Documentation](#Documentation)\n\n[Develop this package!](#Development)\n\n### installing\n\n```\nnpm install -S djedi-json react react-dom\n```\n\n# Djedi pages frontend\n\n\n# Documentation\n## Using the CMS in an admin.\n\nThe CMS has two main components,  a \u003cPreview/\u003e, displaying the results/editable parts of your CMS, and a `\u003cCMS/\u003e` component providing context.\nThe Preview has to be wrapped in `\u003cCMS/\u003e` to work. `\u003cCMS/\u003e` is basically a ContextProvider, allowing you to append your own children that consume `CMSContext`.\n\nCMS only needs a `config` to work, but if you want to continue on a previously saved document this is passed as `tree`.\n```\nimport { CMS, createConfig, Preview } from 'djedi-json';\n\nconst App = () =\u003e (\n  \u003cCMS config={} tree={}\u003e\n    \u003cPreview /\u003e\n  \u003c/CMS\u003e)\n```\n## Consuming data created by the admin in a frontend:\n\n```\nimport { Renderer } from 'djedi-json';\n\n// Map the types to the Components you want to display.\nconst config = {\n  components: [\n    { Component: Page, type: \"component/page\" },\n    { Component: RichText, type: \"component/rich-text\" },\n    { Component: Image, type: \"component/image\" },\n    { Component: Article, type: \"component/article\" },\n  ],\n};\n\nconst tree = {\n  type: 'component/page',\n  content: {\n    title: 'Example page',\n    meta: 'Meta title',\n    sub: 'This is a pluggable component admin',\n    children: [\n      {\n        type: 'component/rich-text',\n        content: { children: 'I am a a header' },\n      },\n      {\n        type: 'component/image',\n        content: {\n          text: 'Interesting facts about cats',\n          background: 'black',\n        },\n      },\n      {\n        type: 'component/container',\n        content: {},\n      },\n    ],\n  },\n}\n\n// The Renderer recursively walks the tree, rendering the components from config with the props from `content` in each TreeNode\nconst Page = () =\u003e {\n  return \u003cRenderer tree={tree} config={config} /\u003e;\n};\n```\n\n## The config\nCreate a config using the `createConfig` util.\n```\nimport { createConfig } from 'djedi-json'\n\nconst config = createConfig({\n  components: [\n    {\n    title: 'Page', // Displayname\n    description: 'Page component', // Description\n    icon: \u003cSvgIcon/\u003e, // A ReactComponent to be used as icon\n    Component: Page, // The component itself\n    type: 'component/page', // This is used to find the component used for rendering on the site.\n    removable: false, // toggle the default remove-button for this element,\n    edit: true, // toggle the default edit-button for this element,\n    editOnClick: true, // Opens the edit menu if the element is clicked on anywhere, not just the edit-button,\n    // The content maps to the component props of the Page component using CMSType:s.\n    content: { \n      children: CMSType.children({ label: 'contents', self: false }),\n      title: CMSType.string({ label: 'Meta Title of the page' }),\n      meta: CMSType.string({ label: 'Meta description' }),\n      sub: CMSType.string({ label: 'Subtitle' }),\n    },\n  }\n  ],\n  // Edits are used to register custom components for editing our own types \n  edit: {\n    \"image\": { // Type-key\n      Component: Unsplash, // ReactComponent\n    },\n  },\n});\n```\n\n### CMSTypes\nThere are four CMSTypes included from the start:\n\n- CMSType.children\n- CMSType.string\n- CMSType.select\n- CMSType.custom\n\n#### CMSType/Children\n\nChildren dictates how and if items can be appended to the item. The settings available are:\n```\nappend: boolean // Can this item have children appended, ie should the plus-button be rendered ?\nself: boolean // The item can accept it's own type as a child\nallowed: string[] // List of types that can be appended, these are available through the append-button rendered if append=truee\n````\n\n#### CMSType/String\n\nUsed for plain string props\n\n#### CMSType/Select\nUsed to allow the user to make a choice from a range of values.\n\n#### CMSType/Custom\n\noptions, can be either a list of strings or an object with `label` and `value` keys.\nCustom is the most versatile of the types and can be used to create a custom editable.\n\nTo render a component that uses itself as a editor, use the `isomorphic` prop.\n```\n  content: CMSType.custom({\n      isomorphic: true,\n    }),\n```\n\n#### Registering custom edits\n\nAll custom edits needs to accept at least `value` and `onChange` as props, handling the two-way-binding,\n\n  edit: {\n    \"image\": { // Type-key\n      Component: Unsplash, // ReactComponent\n    },\n  },\n\n\n## Exported utils\n`createConfig`\nAccepts `components` and `edits` and returns a config\n\n`createEmpty`\nReturns an empty shell of a tree-node, accepts a type as string.\n## Exported Components\n`CMS` - Wraps the entire CMS, supplying a CMS context provider. accepts a `config` and a `tree`\n\n`Preview`\nTakes no props. Renders the admin itself.\n\n## Exported Contexts\n\n`EditContext`\nUsed to access edit functions on the current component. Each component is rendered within a separate EditContext.\n\n`CMSContext`\nUsed to access the current root tree of the CMS.\n\n\n## Development\n\nWithin this repo is an example Create-react-app that has a link into the folder above, being the admin.\n\nGet started:\n\n```\nnpm ci:all; // install dependencies for example app and djedi-json\n\nRun npm start in both the example app and the packages/djedi-json\n```\n\n## Publishing to NPM\n```\nnpm run publish:core\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5monkeys%2Fdjedi-json.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5monkeys%2Fdjedi-json.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5monkeys%2Fdjedi-json.js/lists"}