{"id":19880928,"url":"https://github.com/gridaco/code-like-ui","last_synced_at":"2025-10-06T10:32:28.998Z","repository":{"id":47150283,"uuid":"392598089","full_name":"gridaco/code-like-ui","owner":"gridaco","description":"ui controls seamlessly embedded in code style block","archived":false,"fork":false,"pushed_at":"2022-11-16T20:45:24.000Z","size":697,"stargazers_count":10,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T00:22:04.895Z","etag":null,"topics":["code","comment","lite","monaco","react"],"latest_commit_sha":null,"homepage":"code-ui.vercel.app","language":"TypeScript","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/gridaco.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":"2021-08-04T07:48:12.000Z","updated_at":"2023-09-21T20:59:38.000Z","dependencies_parsed_at":"2022-08-28T03:01:25.288Z","dependency_job_id":null,"html_url":"https://github.com/gridaco/code-like-ui","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode-like-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode-like-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode-like-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fcode-like-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gridaco","download_url":"https://codeload.github.com/gridaco/code-like-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235228367,"owners_count":18956220,"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":["code","comment","lite","monaco","react"],"created_at":"2024-11-12T17:12:49.481Z","updated_at":"2025-10-06T10:32:28.643Z","avatar_url":"https://github.com/gridaco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](./branding/cover.png)\n\n# @code-ui\n\nui controls seamlessly embedded in code style block\n\n## What is it?\n\n![](branding/control-in-comment.png)\n\n## Installation\n\n```sh\nyarn add code-like-ui\n# or with npm\nnpm i code-like-ui\n```\n\n## Simple Usage\n\n```tsx\nimport CodeLikeView from \"code-like-ui\";\n\n// ...\n\u003cCodeLikeView\n  lang={\"jsx\"} // defaults to js - \"js\" | \"dart\" | \"paython\" | LanguageConfig\n  style={\"monokai\"} // default style = monokai\n  padding={\"10px\"}\n  controls={[\n      platform_field,\n      lang_field,\n  ]}\n  expandableConfig={\n      lines: 2,\n      expandable: true\n      hidable: true\n  }\n  onChange={(field, value) =\u003e {\n      //\n  }}\n/\u003e;\n\n//\n\n```\n\n```ts\nexport interface LanguageConfig {\n  docstring: {\n    start: string;\n    mid?: string;\n    end: string;\n  };\n  indent: {\n    start?: number;\n    mid?: number;\n    end: number;\n  };\n}\n\ntype LanguageType = \"js\" | \"dart\" | \"paython\" | LanguageConfig;\n\nconst jsstyle: LanguageConfig = {\n  docstring: {\n    start: \"/**\",\n    mid: \"*\",\n    end: \"*/\",\n  },\n  indent: {\n    mid: 8,\n    end: 8,\n  },\n};\n```\n\n## Comlex Example\n\n**creating field**\n\n```ts\nlet lang = \"tsx\";\nconst onLangChange = (v) =\u003e {\n    lang = v\n}\nconst lang_field  = {\n    tag: \"@\"\n    name: \"lang\",\n    template?: `{{ tag }}{{ name }}{{ option.name }}`\n    options: [\n        {\n            name: \"Flutter\",\n            value: \"platform.flutter\",\n            description: \"flutter\",\n        }\n    ]\n}\n\nconst platform_field  = {\n    tag: \"@\"\n    name: \"platform\",\n    template: `{{ tag }}{{ name }}{{ value }} (juice.${lang})`\n    options: [\n        {\n            name: \"Flutter\",\n            value: \"platform.flutter\",\n            description: \"flutter\",\n        }\n    ]\n}\n```\n\n## Props\n\n```ts\n///\ninterface Option\u003cT\u003e {\n  name: string;\n  value: T;\n  desc?: string;\n}\n\ninterface Field\u003cT = string\u003e {\n  tag: \"@\" | \"\";\n  name: string;\n  template?: string;\n  enabled?: boolean;\n  // value: string\n  options?: Option\u003cT\u003e[];\n}\n```\n\n## The design\n\nDesign resource of code-ui is [avalable here][designlink]. For edit permission, please contact us via universe@grida.co\n\n### Color schemes\n\nFor more color scheme options \u0026 customization, read [docs/color-scheme.md](./docs/color-scheme.md)\n\n## Proposals\n\n- [Easy configurable view with json IO](https://github.com/gridaco/code-like-ui/issues/1)\n\n## References\n\n- [vscode-webview-ui-toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit)\n- https://material-ui.com/components/selects/\n\n[designlink]: https://www.figma.com/file/nHJQZjVwnF2dtx153MS9J1/code-ui?node-id=2%3A354\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridaco%2Fcode-like-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgridaco%2Fcode-like-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridaco%2Fcode-like-ui/lists"}