{"id":19865055,"url":"https://github.com/glweems/simple-codesandbox","last_synced_at":"2025-02-28T23:24:49.014Z","repository":{"id":57359879,"uuid":"203147039","full_name":"glweems/simple-codesandbox","owner":"glweems","description":"codesandbox react iframe component","archived":false,"fork":false,"pushed_at":"2024-04-23T01:42:57.000Z","size":1630,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T15:38:53.136Z","etag":null,"topics":["codesandbox","component","embeds","react"],"latest_commit_sha":null,"homepage":"https://glweems.github.io/simple-codesandbox","language":"HTML","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/glweems.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":"2019-08-19T10:02:23.000Z","updated_at":"2019-09-17T09:24:22.000Z","dependencies_parsed_at":"2024-11-12T15:33:57.929Z","dependency_job_id":null,"html_url":"https://github.com/glweems/simple-codesandbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fsimple-codesandbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fsimple-codesandbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fsimple-codesandbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fsimple-codesandbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glweems","download_url":"https://codeload.github.com/glweems/simple-codesandbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241274277,"owners_count":19937154,"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":["codesandbox","component","embeds","react"],"created_at":"2024-11-12T15:20:49.883Z","updated_at":"2025-02-28T23:24:48.994Z","avatar_url":"https://github.com/glweems.png","language":"HTML","readme":"# simple-codesandbox\n\n\u003e easily display configurable codesandbox iframe\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/f642e363e7c54eb7bbe43a01923e8ee8)](https://app.codacy.com/app/glweems/simple-codesandbox?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=glweems/simple-codesandbox\u0026utm_campaign=Badge_Grade_Settings)\n[![NPM](https://img.shields.io/npm/v/simple-codesandbox.svg)](https://www.npmjs.com/package/simple-codesandbox) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save simple-codesandbox\n```\n\nor\n\n```bash\nyarn add simple-codesandbox\n```\n\n## Embed Options\n\nThe options shown in the embed modal are not all options available. We need a\nnew UI for the share model to reflect these options, in the meantime you can\nfind them here.\n\n| Option           | Description                                                                        | Values                                 | Default                              |\n| ---------------- | ---------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------ |\n| `codeMirror`     | Use CodeMirror editor instead of Monaco (decreases embed size significantly).      | `boolean`                              | `false`                              |\n| `editorSize`     | Size in percentage of editor.                                                      | `number`                               | `50`                                 |\n| `eslint`         | Use eslint (increases embed size significantly).                                   | `boolean`                              | `false`                              |\n| `expandDevTools` | Start with the devtools (console) open.                                            | `boolean`                              | `false`                              |\n| `fontSize`       | Font size of editor                                                                | `number (in px)`                       | `14`                                 |\n| `forceRefresh`   | Force a full refresh of frame after every edit.                                    | `boolean`                              | `false`                              |\n| `hideNavigation` | Hide the navigation bar of the preview.                                            | `boolean`                              | `false`                              |\n| `highlights`     | Which lines to highlight (only works in CodeMirror)                                | `comma separated list of line numbers` |                                      |\n| `initialPath`    | Which url to initially load in address bar                                         | `string`                               | `/`                                  |\n| `moduleView`     | Evaluate the file that is open in the editor.                                      | `boolean`                              | `false`                              |\n| `previewWindow`  | Which preview window to open by default                                            | `console` / `tests` / `browser`        | `browser`                            |\n| `runOnClick`     | Only load the preview when the user says so.                                       | `boolean`                              | `false`                              |\n| `verticalLayout` | Whether to show the editor and preview vertically.                                 | `boolean`                              | `false`                              |\n| `view`           | Which view to open by default                                                      | `editor` / `split` / `preview`         | `split`, `preview` for small screens |\n| `module`         | Which module to open by default. Multiple paths comma separated are allowed, in that case we show them as tabs | path to module (starting with `/`)   | entry path |\n\n## Example Embeds\n\nThese are some examples of embeds, based on their properties.\n\n## Usage\n\n```tsx\nconst App = () =\u003e (\n  \u003cCodeSandbox sandbox=\"github/glweems/empty-sandbox\" /\u003e\n)\n```\n\n### Smallest Embed\n\n```tsx\nconst App = () =\u003e (\n  \u003cCodeSandbox sandbox=\"github/glweems/empty-sandbox\" codeMirror /\u003e\n)\n```\n\n## License\n\nMIT © [glweems](https://github.com/glweems)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglweems%2Fsimple-codesandbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglweems%2Fsimple-codesandbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglweems%2Fsimple-codesandbox/lists"}