• Stars
    star
    533
  • Rank 83,238 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Deploy any component directly to codesandbox from anywhere

Codesandboxer

All Contributors

Export a component to codesandboxer:

react-codesandboxer-example

Codesandboxer is a tool to allow you to deploy to go from an 'entry' file, and deploy that file and all related files to CodeSandbox. Its goal is to allow you to do this from any component written anywhere, from code you are viewing on github through to code running locally on your machine, as well as build making this easy into your own websites.

To allow its use in multiple contexts, it has been split into a monorepo.

The major use-case for codesandboxer is to allow you to easily share examples with others, or to link to editable versions of examples from a documentation website.

Cool Stuff

With an entry file, we work to only upload the files you need, and the dependencies you use from your project, making lighter sandbox uploads.

Since we wrap the file we are given, codesandboxer can allow you to quickly open any react component in CodeSandbox, even if you are not set up to start editing it immediately.

Core Bits

The core packages, codesandboxer allows you to fetch files from github or bitbucket, given a git entry file.

codesandboxer-fs allows you to do the same kinds of actions from your terminal, and can be installed as a CLI. See its documentation for how to use it.

Other packages

  • react-codesandboxer is a react wrapper around codesandboxer allowing you to easily render a button to open an example in codesandbox.
  • vs-codesandboxer is a visual studio code extension to allow you to take an open file in vs-code and deploy it to codesandboxer.
  • atom-codesandboxer is an atom extension to allow you to take an open file in atom and deploy it to codesandboxer (IN DEVELOPMENT).
  • bitbucket-codesandboxer

vs-codesandboxer-example

Desired future packages

Extend codesandboxer to support non-react sandboxes.

Contributors ✨

Thanks goes to these people (emoji key):

Ben Conolly
Ben Conolly

πŸ› πŸ’» πŸ“– πŸ€” πŸš‡ 🚧 ⚠️ πŸ”§
Joss Mackison
Joss Mackison

πŸ’»
Dominik Wilkowski
Dominik Wilkowski

πŸ–‹
lukebatchelor
lukebatchelor

πŸ’»
Ives van Hoorne
Ives van Hoorne

πŸ’» ⚠️ πŸ“–
Gilles De Mey
Gilles De Mey

πŸ’»
kangweichan
kangweichan

πŸ’»
MichaΓ«l De Boey
MichaΓ«l De Boey

🚧 πŸ”§

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

More Repositories

1

codesandbox-client

An online IDE for rapid web development
JavaScript
13,061
star
2

sandpack

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
TypeScript
4,834
star
3

nodebox-runtime

Nodebox is a runtime for executing Node.js modules in the browser.
TypeScript
580
star
4

codesandbox-importers

All importers & exporters for CodeSandbox
TypeScript
272
star
5

dependency-packager

TypeScript
237
star
6

cli

Upload your templates to codesandbox with a single command πŸ–οΈ. This repo has been moved here: https://github.com/codesandbox-app/codesandbox-importers/tree/master/packages/cli
TypeScript
119
star
7

vscode-theme

An official CodeSandbox theme for Visual Studio Code.
Shell
93
star
8

sandpack-bundler

The new bundler/runtime powering client-side sandpack sandboxes
TypeScript
60
star
9

excalidraw-firebase

Firebase service to sync your company Gmail to persisted Excalidraws
TypeScript
40
star
10

static-template

HTML
37
star
11

screenshotter

TypeScript
31
star
12

sandpack-cdn

Rust
29
star
13

codesandbox-templates

Official Sandbox Templates and Utilities Packages for CodeSandbox
TypeScript
29
star
14

sandbox-templates

TypeScript
28
star
15

codesandbox-black-vscode-theme

Dark VSCode theme for CodeSandbox Black
JavaScript
22
star
16

status-page

The page containing the status of the codesandbox services
TypeScript
18
star
17

docs

MDX
18
star
18

crdt-tree

An implementation of a tree Conflict-Free Replicated Data Type (CRDT)
TypeScript
17
star
19

type-fetcher

TypeScript
16
star
20

storybook-addon

TypeScript
16
star
21

codesandbox-ci-ui

TypeScript
15
star
22

ueberauth_workos

Ueberauth Strategy for WorkOS Single Sign-On
Elixir
9
star
23

netlify-deploy

A service to deploy sites to netlify
JavaScript
8
star
24

open-in-codesandbox

GitHub Action that makes it easy to review your work in CodeSandbox.
8
star
25

node-typescript-starter

Node.js TypeScript project starter
JavaScript
7
star
26

codesandbox-ios

6
star
27

codesandbox-template-vite-react

An empty boilerplate template to start a fresh project
CSS
6
star
28

project-template-next.js

Next.js template for CodeSandbox Projects
TypeScript
6
star
29

codesandbox-desktop

TypeScript
5
star
30

directory-permission-watcher

Rust
5
star
31

codesandbox-template-django

A Django starter project
Python
5
star
32

sandpack-resolver

The file resolver used by the sandpack ecosystem
TypeScript
5
star
33

codesandbox-example-docker

An empty boilerplate template to start a fresh project
Nix
5
star
34

linear-codesandbox-integration

Linear & CodeSandbox issue integration
TypeScript
5
star
35

codesandbox-template-svelte-kit

SvelteKit template for CodeSandbox Projects
Svelte
5
star
36

tweetsandbox

JavaScript
5
star
37

Site-Image-Crawler-with-node

TypeScript
4
star
38

remixapp

A quick starter for Remix applications
JavaScript
4
star
39

codesandbox-template-bun

Bun template for CodeSandbox Projects
4
star
40

todo-postgres-prisma

Created with CodeSandbox
TypeScript
4
star
41

devcontainer-images

A collection of images that are used as the default images for running devcontainers in CodeSandbox.
Dockerfile
3
star
42

demo

Created with CodeSandbox
TypeScript
3
star
43

sw-proxy-test

An empty boilerplate template to start a fresh project
3
star
44

blog-example

CodeSandbox Personal Blog example with Astro
Astro
3
star
45

codesandbox-client-refactor

Experimental project to refactor CodeSandbox client with in-house state management tool
TypeScript
3
star
46

codesandbox-template-next.js

Next.js template for CodeSandbox Projects
TypeScript
3
star
47

dependency-seo-pages

Pages with the Sandboxes in each dependency
TypeScript
3
star
48

codesandbox-stencil-component

TypeScript
3
star
49

codesandbox-template-remix

Remix template for CodeSandbox Projects
TypeScript
3
star
50

cancelable-result

A tiny utility for cancelable results
TypeScript
2
star
51

payload-example

An empty boilerplate template to start a fresh project
TypeScript
2
star
52

npm-lib

JavaScript
2
star
53

codesandbox-stencil

TypeScript
2
star
54

extension-template

A template to create devtools for CodeSandbox
TypeScript
2
star
55

test-sandbox

CSS
2
star
56

codesandbox-template-blank

An empty boilerplate template to start a fresh project
2
star
57

codesandbox-template-nuxt

NuxtJS template for CodeSandbox Projects
Vue
2
star
58

prompt-to-json

Allows you to prompt an LLM and get reliable structured JSON back
2
star
59

devcontainer-features

Devcontainer feature used in CodeSandbox containers
Shell
2
star
60

integration-sandboxes

Integration Tests Sandboxes
JavaScript
2
star
61

public-domains-ex

Elixir library for looking up publicly-available email domains
Elixir
1
star
62

traffic-model

An empty boilerplate template to start a fresh project
TypeScript
1
star
63

testnext

Next.js template for CodeSandbox Projects
TypeScript
1
star
64

postgres-test

An empty boilerplate template to start a fresh project
1
star
65

workers-test

An empty boilerplate template to start a fresh project
1
star
66

safari-messagechannel

An empty boilerplate template to start a fresh project
1
star
67

new-deno-1-25

An empty boilerplate template to start a fresh project
1
star
68

cocoapods-fix-react-native

Ruby
1
star
69

codesandbox-template-astro

Astro template for CodeSandbox Projects
Astro
1
star
70

now-deploy

Service to deploy to now
JavaScript
1
star
71

utils

An empty boilerplate template to start a fresh project
TypeScript
1
star
72

sandpack-test

Next.js template for CodeSandbox Projects
TypeScript
1
star
73

codesandbox-template-gatsby

Gatsby template for CodeSandbox Projects
JavaScript
1
star
74

svelt

SvelteKit template for CodeSandbox Projects
Svelte
1
star
75

codesandbox-template-blank-ts

An empty boilerplate template to start a fresh project
TypeScript
1
star
76

codesandbox-template-deno-server

Deno server template for CodeSandbox Projects
TypeScript
1
star