├── .stackblitzrc ├── .prettierrc ├── docs ├── .vitepress │ └── theme │ │ ├── styles │ │ ├── vars.scss │ │ ├── index.scss │ │ ├── fonts.scss │ │ ├── content.scss │ │ └── colors.scss │ │ ├── components │ │ ├── AuthButtons │ │ │ ├── NavBarAuthButtons.vue │ │ │ ├── NavScreenAuthButtons.vue │ │ │ ├── AuthButtons.vue │ │ │ └── linkStyles.scss │ │ ├── Buttons │ │ │ ├── InlineButton.vue │ │ │ └── CTAButton.vue │ │ ├── Helpers │ │ │ ├── VideoLink.vue │ │ │ ├── ArticleLink.vue │ │ │ ├── PodcastLink.vue │ │ │ ├── RepositoryLink.vue │ │ │ ├── AttributionLinks.vue │ │ │ ├── Screenshot.vue │ │ │ ├── AttributionLink.vue │ │ │ ├── Quote.vue │ │ │ └── CommunityProjectPageHeading.vue │ │ ├── Features │ │ │ ├── FeaturesCardList.vue │ │ │ └── FeaturesCard.vue │ │ ├── WCUsedByProjects │ │ │ ├── ProjectsUsingWCCardList.vue │ │ │ └── ProjectsUsingWCCard.vue │ │ ├── CustomLayout.vue │ │ ├── WCUsedByOrgs │ │ │ └── WCUsedBy.vue │ │ ├── CardLists │ │ │ ├── CardList.vue │ │ │ └── CardSingle.vue │ │ ├── Icons │ │ │ ├── LoadingIcon.vue │ │ │ └── SupportIcon.vue │ │ ├── Footer.vue │ │ ├── Examples │ │ │ ├── WCEmbed │ │ │ │ └── utils.ts │ │ │ ├── ExampleTerminal.vue │ │ │ └── ExampleBrowser.vue │ │ ├── Testimonials │ │ │ └── TestimonialCard.vue │ │ └── Hero │ │ │ ├── Hero.vue │ │ │ └── HeroAi.vue │ │ ├── index.ts │ │ ├── scripts │ │ ├── gtag.ts │ │ └── edit-link.ts │ │ └── data │ │ └── people.ts ├── public │ ├── img │ │ ├── og │ │ │ ├── ai.png │ │ │ ├── contact.png │ │ │ ├── commercial_usage.png │ │ │ ├── guide-quickstart.png │ │ │ ├── webcontainer_api.png │ │ │ ├── api-api_reference.png │ │ │ ├── guide-api_support.png │ │ │ ├── guide-file_system.png │ │ │ ├── guide-introduction.png │ │ │ ├── guide-browser_config.png │ │ │ ├── guide-browser_support.png │ │ │ ├── guide-getting_started.png │ │ │ ├── guide-troubleshooting.png │ │ │ ├── guide-running_commands.png │ │ │ ├── guide-configuring_headers.png │ │ │ ├── guide-community_inspirations.png │ │ │ ├── tutorial-4_running_dev_server.png │ │ │ ├── tutorial-6_connect_a_terminal.png │ │ │ ├── tutorial-7_add_interactivity.png │ │ │ ├── guide-working_with_the_file_system.png │ │ │ ├── tutorial-3_installing_dependencies.png │ │ │ ├── tutorial-2_setting_up_webcontainers.png │ │ │ ├── guide-runtime_test_cases_for_ai_agents.png │ │ │ ├── tutorial-1_build_your_first_webcontainer_app.png │ │ │ └── tutorial-5_editing_a_file_updating_the_iframe.png │ │ ├── 0001-8-2.jpg │ │ ├── ai │ │ │ └── wc_api-ai.png │ │ ├── retune-screen.png │ │ ├── theme │ │ │ ├── favicon.png │ │ │ ├── docs-social.png │ │ │ ├── link-bg-bolt-dark.jpg │ │ │ ├── link-bg-bolt-light.jpg │ │ │ ├── link-bg-steps-dark.png │ │ │ ├── link-bg-squares-dark.png │ │ │ ├── link-bg-squares-light.png │ │ │ ├── link-bg-steps-light.png │ │ │ ├── docs-logo.svg │ │ │ ├── favicon.svg │ │ │ └── google.svg │ │ ├── community │ │ │ ├── chess.png │ │ │ ├── clack.png │ │ │ ├── re_tune.png │ │ │ ├── vslite.png │ │ │ ├── codeflow.png │ │ │ ├── pkg-size.png │ │ │ ├── dan_jutan_talk.png │ │ │ ├── otto_engineer.png │ │ │ ├── web_publisher.png │ │ │ ├── angular-tutorial.png │ │ │ ├── eric_simons_talk.png │ │ │ ├── rich_harris_talk.png │ │ │ ├── sylwia_vargas_talk.png │ │ │ ├── web_publisher_talk.png │ │ │ ├── api_security_academy.png │ │ │ ├── builder-io-playground.png │ │ │ ├── stylelint-playground.png │ │ │ └── codeflow-stackblitz-figma.jpg │ │ ├── people │ │ │ ├── dan_jutan.jpg │ │ │ ├── eric_simons.jpg │ │ │ ├── rich_harris.jpg │ │ │ └── sylwia_vargas.jpg │ │ ├── testimonials │ │ │ ├── xata.png │ │ │ ├── retune.png │ │ │ ├── dan_jutan.jpg │ │ │ ├── retune-dj.jpg │ │ │ ├── nate_moore.jpg │ │ │ ├── rich_harris.jpg │ │ │ ├── vojta_holik.png │ │ │ ├── atila_fassina.png │ │ │ ├── manus_nijhoff.png │ │ │ ├── ramon_huidobro.png │ │ │ ├── abdellah_alaoui.png │ │ │ ├── swyx_shawn_wang.jpg │ │ │ ├── suborbital.svg │ │ │ ├── astro-full-dark.svg │ │ │ └── astro-full-light.svg │ │ ├── 0001-8-2-dk-bluedk.jpg │ │ ├── svelte-screen-dark.png │ │ ├── svelte-screen-light.png │ │ ├── web_publisher-screen-dark.png │ │ ├── web_publisher-screen-light.png │ │ ├── features │ │ │ ├── features-02-browsers-dark.png │ │ │ ├── features-02-browsers-light.png │ │ │ ├── features-03-frameworks-dark.png │ │ │ ├── features-03-frameworks-light.png │ │ │ ├── features-04-webassembly-dark.png │ │ │ ├── elements-01-nodeLIGHT-02-DARK.png │ │ │ ├── features-04-webassembly-light.png │ │ │ ├── features-01-package_managers-dark.png │ │ │ └── features-01-package_managers-light.png │ │ ├── components │ │ │ └── ExampleBrowser │ │ │ │ ├── example-browser-os_buttons.svg │ │ │ │ └── example-browser-search_bar_icons.svg │ │ └── logos │ │ │ ├── google-dark.svg │ │ │ ├── google-light.svg │ │ │ ├── stackblitz-dark.svg │ │ │ └── stackblitz-light.svg │ ├── fonts │ │ ├── gilroy-bold.woff2 │ │ ├── gilroy-medium.woff2 │ │ ├── gilroy-regular.woff2 │ │ ├── gilroy-semibold.woff2 │ │ └── gilroy-extrabold.woff2 │ ├── _redirects │ └── icons │ │ ├── fa-bars-filter-regular.svg │ │ ├── fa-arrow-right-light.svg │ │ ├── fa-message-arrow-up-right-solid.svg │ │ ├── fa-browser.svg │ │ ├── fa-youtube.svg │ │ ├── fa-external-link-alt-solid.svg │ │ ├── fa-triangle-exclamation-regular.svg │ │ ├── fa-link-external.svg │ │ ├── fa-brackets-curly.svg │ │ ├── fa-thought-bubble-regular.svg │ │ ├── fa-podcast-solid.svg │ │ ├── fa-thumbs-down.svg │ │ ├── fa-thumbs-up.svg │ │ ├── fa-books-regular.svg │ │ ├── fa-twitter.svg │ │ ├── fa-file-import.svg │ │ ├── fa-link.svg │ │ ├── fa-hand-point-up-light.svg │ │ ├── fa-newspaper-regular.svg │ │ ├── fa-sparkles-regular.svg │ │ ├── fa-head-side-brain-regular.svg │ │ ├── fa-users.svg │ │ ├── fa-github.svg │ │ ├── fa-books-light.svg │ │ ├── fa-life-ring.svg │ │ ├── fa-gear.svg │ │ └── fa-lightbulb-on-light.svg ├── tutorial │ ├── images │ │ ├── 11-final.png │ │ ├── 20-typing.png │ │ ├── 17-its-alive.png │ │ ├── 10-edited-file.png │ │ ├── 3-scaffolding.png │ │ ├── 12-terminal-div.png │ │ ├── 24-line-resizes.png │ │ ├── 5-logging-output.png │ │ ├── 9-server-output.png │ │ ├── 16-npm-start-output.png │ │ ├── 19-terminal-prompt.png │ │ ├── 2-no-welcome-screen.png │ │ ├── 22-line-wrapping-up.png │ │ ├── 1-vite-welcome-screen.png │ │ ├── 13-hooked-up-terminal.png │ │ ├── 15-npm-install-output.png │ │ ├── 18-use-terminal-prompt.png │ │ ├── 21-line-sticking-out.png │ │ ├── 23-line-still-wrapped-up.png │ │ ├── 6-printing-file-textarea.png │ │ ├── 14-terminal-full-page-width.png │ │ ├── 4-scaffolding-with-styles.png │ │ ├── 7-installing-dependencies.png │ │ └── 8-express-app-webcontainers.png │ ├── 5-editing-a-file-updating-the-iframe.md │ ├── 4-running-dev-server.md │ └── 3-installing-dependencies.md ├── guides │ ├── assets │ │ ├── brave-shields-popup.png │ │ ├── brave-stuck-project.png │ │ ├── chrome-show-cookies.png │ │ ├── brave-shields-details.png │ │ ├── brave-working-project.png │ │ ├── chrome-blocked-cookies.png │ │ ├── chrome-settings-cookies-1.png │ │ ├── chrome-settings-cookies-2.png │ │ ├── chrome-settings-cookies-3.png │ │ ├── edge-settings-enhanced-security-1.png │ │ └── edge-settings-enhanced-security-2.png │ ├── api-support.md │ └── running-processes.md ├── ai.md ├── contact.md ├── index.md ├── community-projects │ ├── builder-io-playground.md │ ├── vslite.md │ ├── retune.md │ ├── stylelint-playground.md │ ├── clack.md │ ├── schachnovelle.md │ ├── angular-tutorial.md │ ├── sveltekit.md │ ├── all-projects.md │ ├── api-security-academy.md │ ├── otto-engineer.md │ ├── pkg-size.md │ ├── stackblitz-codeflow.md │ └── stackblitz-web-publisher.md ├── enterprise.md └── changelog.md ├── netlify.toml ├── .vscode └── extensions.json ├── env.d.ts ├── .github └── ISSUE_TEMPLATE │ ├── ✨-feature-your-project.md │ └── 🪲-bug-report.md ├── tsconfig.json ├── LICENSE ├── package.json ├── .gitignore ├── CODE_OF_CONDUCT.md └── CONTRIBUTING.md /.stackblitzrc: -------------------------------------------------------------------------------- 1 | { 2 | "startCommand": "npm run dev" 3 | } 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "singleQuote": true, 4 | "printWidth": 100 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/vars.scss: -------------------------------------------------------------------------------- 1 | $bp-medium: 680px; 2 | $bp-large: 960px; 3 | $bp-xlarge: 1200px; 4 | -------------------------------------------------------------------------------- /docs/public/img/og/ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/ai.png -------------------------------------------------------------------------------- /docs/public/img/0001-8-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/0001-8-2.jpg -------------------------------------------------------------------------------- /docs/public/img/ai/wc_api-ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/ai/wc_api-ai.png -------------------------------------------------------------------------------- /docs/public/img/og/contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/contact.png -------------------------------------------------------------------------------- /docs/public/img/retune-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/retune-screen.png -------------------------------------------------------------------------------- /docs/public/img/theme/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/favicon.png -------------------------------------------------------------------------------- /docs/tutorial/images/11-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/11-final.png -------------------------------------------------------------------------------- /docs/tutorial/images/20-typing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/20-typing.png -------------------------------------------------------------------------------- /docs/public/fonts/gilroy-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/fonts/gilroy-bold.woff2 -------------------------------------------------------------------------------- /docs/public/fonts/gilroy-medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/fonts/gilroy-medium.woff2 -------------------------------------------------------------------------------- /docs/public/img/community/chess.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/chess.png -------------------------------------------------------------------------------- /docs/public/img/community/clack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/clack.png -------------------------------------------------------------------------------- /docs/public/img/community/re_tune.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/re_tune.png -------------------------------------------------------------------------------- /docs/public/img/community/vslite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/vslite.png -------------------------------------------------------------------------------- /docs/public/img/people/dan_jutan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/people/dan_jutan.jpg -------------------------------------------------------------------------------- /docs/public/img/testimonials/xata.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/xata.png -------------------------------------------------------------------------------- /docs/public/img/theme/docs-social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/docs-social.png -------------------------------------------------------------------------------- /docs/tutorial/images/17-its-alive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/17-its-alive.png -------------------------------------------------------------------------------- /docs/public/fonts/gilroy-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/fonts/gilroy-regular.woff2 -------------------------------------------------------------------------------- /docs/public/fonts/gilroy-semibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/fonts/gilroy-semibold.woff2 -------------------------------------------------------------------------------- /docs/public/img/0001-8-2-dk-bluedk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/0001-8-2-dk-bluedk.jpg -------------------------------------------------------------------------------- /docs/public/img/community/codeflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/codeflow.png -------------------------------------------------------------------------------- /docs/public/img/community/pkg-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/pkg-size.png -------------------------------------------------------------------------------- /docs/public/img/og/commercial_usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/commercial_usage.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-quickstart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-quickstart.png -------------------------------------------------------------------------------- /docs/public/img/og/webcontainer_api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/webcontainer_api.png -------------------------------------------------------------------------------- /docs/public/img/people/eric_simons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/people/eric_simons.jpg -------------------------------------------------------------------------------- /docs/public/img/people/rich_harris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/people/rich_harris.jpg -------------------------------------------------------------------------------- /docs/public/img/svelte-screen-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/svelte-screen-dark.png -------------------------------------------------------------------------------- /docs/public/img/svelte-screen-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/svelte-screen-light.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/retune.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/retune.png -------------------------------------------------------------------------------- /docs/tutorial/images/10-edited-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/10-edited-file.png -------------------------------------------------------------------------------- /docs/tutorial/images/3-scaffolding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/3-scaffolding.png -------------------------------------------------------------------------------- /docs/guides/assets/brave-shields-popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/brave-shields-popup.png -------------------------------------------------------------------------------- /docs/guides/assets/brave-stuck-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/brave-stuck-project.png -------------------------------------------------------------------------------- /docs/guides/assets/chrome-show-cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/chrome-show-cookies.png -------------------------------------------------------------------------------- /docs/public/fonts/gilroy-extrabold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/fonts/gilroy-extrabold.woff2 -------------------------------------------------------------------------------- /docs/public/img/og/api-api_reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/api-api_reference.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-api_support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-api_support.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-file_system.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-file_system.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-introduction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-introduction.png -------------------------------------------------------------------------------- /docs/public/img/people/sylwia_vargas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/people/sylwia_vargas.jpg -------------------------------------------------------------------------------- /docs/public/img/testimonials/dan_jutan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/dan_jutan.jpg -------------------------------------------------------------------------------- /docs/public/img/testimonials/retune-dj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/retune-dj.jpg -------------------------------------------------------------------------------- /docs/tutorial/images/12-terminal-div.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/12-terminal-div.png -------------------------------------------------------------------------------- /docs/tutorial/images/24-line-resizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/24-line-resizes.png -------------------------------------------------------------------------------- /docs/tutorial/images/5-logging-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/5-logging-output.png -------------------------------------------------------------------------------- /docs/tutorial/images/9-server-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/9-server-output.png -------------------------------------------------------------------------------- /docs/guides/assets/brave-shields-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/brave-shields-details.png -------------------------------------------------------------------------------- /docs/guides/assets/brave-working-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/brave-working-project.png -------------------------------------------------------------------------------- /docs/public/img/community/dan_jutan_talk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/dan_jutan_talk.png -------------------------------------------------------------------------------- /docs/public/img/community/otto_engineer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/otto_engineer.png -------------------------------------------------------------------------------- /docs/public/img/community/web_publisher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/web_publisher.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-browser_config.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-browser_config.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-browser_support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-browser_support.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-getting_started.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-getting_started.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-troubleshooting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-troubleshooting.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/nate_moore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/nate_moore.jpg -------------------------------------------------------------------------------- /docs/public/img/testimonials/rich_harris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/rich_harris.jpg -------------------------------------------------------------------------------- /docs/public/img/testimonials/vojta_holik.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/vojta_holik.png -------------------------------------------------------------------------------- /docs/public/img/theme/link-bg-bolt-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/link-bg-bolt-dark.jpg -------------------------------------------------------------------------------- /docs/public/img/theme/link-bg-bolt-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/link-bg-bolt-light.jpg -------------------------------------------------------------------------------- /docs/public/img/theme/link-bg-steps-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/link-bg-steps-dark.png -------------------------------------------------------------------------------- /docs/tutorial/images/16-npm-start-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/16-npm-start-output.png -------------------------------------------------------------------------------- /docs/tutorial/images/19-terminal-prompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/19-terminal-prompt.png -------------------------------------------------------------------------------- /docs/tutorial/images/2-no-welcome-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/2-no-welcome-screen.png -------------------------------------------------------------------------------- /docs/tutorial/images/22-line-wrapping-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/22-line-wrapping-up.png -------------------------------------------------------------------------------- /docs/guides/assets/chrome-blocked-cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/chrome-blocked-cookies.png -------------------------------------------------------------------------------- /docs/public/img/community/angular-tutorial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/angular-tutorial.png -------------------------------------------------------------------------------- /docs/public/img/community/eric_simons_talk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/eric_simons_talk.png -------------------------------------------------------------------------------- /docs/public/img/community/rich_harris_talk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/rich_harris_talk.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-running_commands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-running_commands.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/atila_fassina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/atila_fassina.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/manus_nijhoff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/manus_nijhoff.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/ramon_huidobro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/ramon_huidobro.png -------------------------------------------------------------------------------- /docs/public/img/theme/link-bg-squares-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/link-bg-squares-dark.png -------------------------------------------------------------------------------- /docs/public/img/theme/link-bg-squares-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/link-bg-squares-light.png -------------------------------------------------------------------------------- /docs/public/img/theme/link-bg-steps-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/theme/link-bg-steps-light.png -------------------------------------------------------------------------------- /docs/public/img/web_publisher-screen-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/web_publisher-screen-dark.png -------------------------------------------------------------------------------- /docs/public/img/web_publisher-screen-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/web_publisher-screen-light.png -------------------------------------------------------------------------------- /docs/tutorial/images/1-vite-welcome-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/1-vite-welcome-screen.png -------------------------------------------------------------------------------- /docs/tutorial/images/13-hooked-up-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/13-hooked-up-terminal.png -------------------------------------------------------------------------------- /docs/tutorial/images/15-npm-install-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/15-npm-install-output.png -------------------------------------------------------------------------------- /docs/tutorial/images/18-use-terminal-prompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/18-use-terminal-prompt.png -------------------------------------------------------------------------------- /docs/tutorial/images/21-line-sticking-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/21-line-sticking-out.png -------------------------------------------------------------------------------- /docs/guides/assets/chrome-settings-cookies-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/chrome-settings-cookies-1.png -------------------------------------------------------------------------------- /docs/guides/assets/chrome-settings-cookies-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/chrome-settings-cookies-2.png -------------------------------------------------------------------------------- /docs/guides/assets/chrome-settings-cookies-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/chrome-settings-cookies-3.png -------------------------------------------------------------------------------- /docs/public/img/community/sylwia_vargas_talk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/sylwia_vargas_talk.png -------------------------------------------------------------------------------- /docs/public/img/community/web_publisher_talk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/web_publisher_talk.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-configuring_headers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-configuring_headers.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/abdellah_alaoui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/abdellah_alaoui.png -------------------------------------------------------------------------------- /docs/public/img/testimonials/swyx_shawn_wang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/testimonials/swyx_shawn_wang.jpg -------------------------------------------------------------------------------- /docs/tutorial/images/23-line-still-wrapped-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/23-line-still-wrapped-up.png -------------------------------------------------------------------------------- /docs/tutorial/images/6-printing-file-textarea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/6-printing-file-textarea.png -------------------------------------------------------------------------------- /docs/public/img/community/api_security_academy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/api_security_academy.png -------------------------------------------------------------------------------- /docs/public/img/community/builder-io-playground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/builder-io-playground.png -------------------------------------------------------------------------------- /docs/public/img/community/stylelint-playground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/stylelint-playground.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-community_inspirations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-community_inspirations.png -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-4_running_dev_server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-4_running_dev_server.png -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-6_connect_a_terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-6_connect_a_terminal.png -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-7_add_interactivity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-7_add_interactivity.png -------------------------------------------------------------------------------- /docs/tutorial/images/14-terminal-full-page-width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/14-terminal-full-page-width.png -------------------------------------------------------------------------------- /docs/tutorial/images/4-scaffolding-with-styles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/4-scaffolding-with-styles.png -------------------------------------------------------------------------------- /docs/tutorial/images/7-installing-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/7-installing-dependencies.png -------------------------------------------------------------------------------- /docs/tutorial/images/8-express-app-webcontainers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/tutorial/images/8-express-app-webcontainers.png -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[headers]] 2 | for = "/*" 3 | [headers.values] 4 | Cross-Origin-Embedder-Policy = "require-corp" 5 | Cross-Origin-Opener-Policy = "same-origin" -------------------------------------------------------------------------------- /docs/public/img/features/features-02-browsers-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-02-browsers-dark.png -------------------------------------------------------------------------------- /docs/guides/assets/edge-settings-enhanced-security-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/edge-settings-enhanced-security-1.png -------------------------------------------------------------------------------- /docs/guides/assets/edge-settings-enhanced-security-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/guides/assets/edge-settings-enhanced-security-2.png -------------------------------------------------------------------------------- /docs/public/img/community/codeflow-stackblitz-figma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/community/codeflow-stackblitz-figma.jpg -------------------------------------------------------------------------------- /docs/public/img/features/features-02-browsers-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-02-browsers-light.png -------------------------------------------------------------------------------- /docs/public/img/features/features-03-frameworks-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-03-frameworks-dark.png -------------------------------------------------------------------------------- /docs/public/img/features/features-03-frameworks-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-03-frameworks-light.png -------------------------------------------------------------------------------- /docs/public/img/features/features-04-webassembly-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-04-webassembly-dark.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-working_with_the_file_system.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-working_with_the_file_system.png -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-3_installing_dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-3_installing_dependencies.png -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import './vars.scss'; 2 | @import './fonts.scss'; 3 | @import './colors.scss'; 4 | @import './fixes.scss'; 5 | @import './content.scss'; 6 | -------------------------------------------------------------------------------- /docs/public/img/features/elements-01-nodeLIGHT-02-DARK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/elements-01-nodeLIGHT-02-DARK.png -------------------------------------------------------------------------------- /docs/public/img/features/features-04-webassembly-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-04-webassembly-light.png -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-2_setting_up_webcontainers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-2_setting_up_webcontainers.png -------------------------------------------------------------------------------- /docs/public/img/features/features-01-package_managers-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-01-package_managers-dark.png -------------------------------------------------------------------------------- /docs/public/img/og/guide-runtime_test_cases_for_ai_agents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/guide-runtime_test_cases_for_ai_agents.png -------------------------------------------------------------------------------- /docs/public/img/features/features-01-package_managers-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/features/features-01-package_managers-light.png -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-1_build_your_first_webcontainer_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-1_build_your_first_webcontainer_app.png -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "Vue.volar" 6 | ] 7 | } -------------------------------------------------------------------------------- /docs/public/img/og/tutorial-5_editing_a_file_updating_the_iframe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackblitz/webcontainer-docs/main/docs/public/img/og/tutorial-5_editing_a_file_updating_the_iframe.png -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/AuthButtons/NavBarAuthButtons.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/AuthButtons/NavScreenAuthButtons.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | declare module '*.vue' { 5 | import type { DefineComponent } from 'vue'; 6 | const component: DefineComponent<{}, {}, any>; 7 | export default component; 8 | } 9 | -------------------------------------------------------------------------------- /docs/public/img/theme/docs-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme'; 2 | import CustomLayout from './components/CustomLayout.vue'; 3 | 4 | import './scripts/edit-link'; 5 | import './styles/index.scss'; 6 | 7 | export default { 8 | ...DefaultTheme, 9 | Layout: CustomLayout, 10 | }; 11 | -------------------------------------------------------------------------------- /docs/public/_redirects: -------------------------------------------------------------------------------- 1 | # Redirect bare section paths to their first page 2 | /guides /guides/quickstart 3 | /tutorial /tutorial/1-build-your-first-webcontainer-app 4 | /tutorial/1-building-your-first-webcontainers-app /tutorial/1-build-your-first-webcontainer-app 5 | /guides/community-inspirations /community-projects/all-projects -------------------------------------------------------------------------------- /docs/public/img/components/ExampleBrowser/example-browser-os_buttons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/public/icons/fa-bars-filter-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Buttons/InlineButton.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /docs/public/icons/fa-arrow-right-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/VideoLink.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/ArticleLink.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/PodcastLink.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/scripts/gtag.ts: -------------------------------------------------------------------------------- 1 | // https://developers.google.com/tag-platform/gtagjs/reference 2 | interface GtagEvent { 3 | eventName: string; 4 | pagePath: string; 5 | value: string; 6 | } 7 | 8 | export function sendEvent({ eventName, pagePath, value }: GtagEvent) { 9 | if (typeof window.gtag === 'function') { 10 | window.gtag('event', eventName, { 11 | page_path: pagePath, 12 | value, 13 | }); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /docs/public/icons/fa-message-arrow-up-right-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/RepositoryLink.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /docs/public/icons/fa-browser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/public/icons/fa-youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-external-link-alt-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-triangle-exclamation-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-link-external.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Features/FeaturesCardList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/WCUsedByProjects/ProjectsUsingWCCardList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /docs/public/icons/fa-brackets-curly.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/scripts/edit-link.ts: -------------------------------------------------------------------------------- 1 | export {}; // required by TS --isolatedModules 2 | 3 | if (typeof document === 'object') { 4 | document.body?.addEventListener('click', clickListener, true); 5 | } 6 | 7 | /** 8 | * Add initialPath attribute to Web Publisher links, 9 | * to render the correct page in the preview. 10 | */ 11 | function clickListener(event: MouseEvent) { 12 | const link = event.target instanceof HTMLAnchorElement ? event.target : null; 13 | if ( 14 | link && 15 | // only change edit link 16 | link.classList.contains('edit-link-button') && 17 | // only change link once 18 | !link.href.includes('initialPath=') 19 | ) { 20 | link.href = `${link.href}?initialPath=${document.location.pathname}`; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/public/icons/fa-thought-bubble-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/CustomLayout.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 27 | -------------------------------------------------------------------------------- /docs/ai.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: &title In-browser code execution for AI 4 | description: &description Execute, interpret, and refactor AI-generated code directly in the browser, a secure, sandboxed environment with zero latency, zero compute costs, and zero virtual machines. 5 | head: 6 | - ['meta', { property: 'og:title', content: *title }] 7 | - [ 8 | 'meta', 9 | { property: 'og:image', content: 'https://webcontainers.io/img/og/ai.png' }, 10 | ] 11 | - ['meta', { name: 'twitter:title', content: *title }] 12 | - ['meta', { name: 'twitter:description', content: *description }] 13 | --- 14 | 15 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/public/icons/fa-podcast-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-thumbs-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/public/icons/fa-thumbs-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/public/icons/fa-books-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Gilroy; 3 | font-weight: 400; 4 | font-style: normal; 5 | src: url('/fonts/gilroy-regular.woff2') format('woff2'); 6 | } 7 | 8 | @font-face { 9 | font-family: Gilroy; 10 | font-weight: 500; 11 | font-style: normal; 12 | src: url('/fonts/gilroy-medium.woff2') format('woff2'); 13 | } 14 | 15 | @font-face { 16 | font-family: Gilroy; 17 | font-weight: 600; 18 | font-style: normal; 19 | src: url('/fonts/gilroy-semibold.woff2') format('woff2'); 20 | } 21 | 22 | @font-face { 23 | font-family: Gilroy; 24 | font-weight: 700; 25 | font-style: normal; 26 | src: url('/fonts/gilroy-bold.woff2') format('woff2'); 27 | } 28 | 29 | @font-face { 30 | font-family: Gilroy; 31 | font-weight: 800; 32 | font-style: normal; 33 | src: url('/fonts/gilroy-extrabold.woff2') format('woff2'); 34 | } 35 | -------------------------------------------------------------------------------- /docs/public/icons/fa-file-import.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/✨-feature-your-project.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "✨ Feature your project" 3 | about: Are you building with WebContainer API? Tell us about it! 4 | title: "[✨ Project submission]" 5 | labels: documentation 6 | assignees: sylwiavargas 7 | 8 | --- 9 | 10 | Are you building with WebContainer API? Let's celebrate it 🥳 11 | Let us know and we'll feature it on our website, blog, and/or social media! 12 | 13 | --- 14 | ## Description 15 | Tell us a few words about your project. 16 | 17 | ## Link 18 | Provide a link or a few links to the project - a website, blog post, a talk, youtube, etc. 19 | 20 | ## Handles 21 | Provide a Twitter or GitHub handle of the author of the project. 22 | 23 | --- 24 | Please note that your submission must: 25 | - be in accordance with our [Code of Conduct](CODE_OF_CONDUCT.md), 26 | - relate to WebContainers, 27 | - feature a project which is still online. 28 | -------------------------------------------------------------------------------- /docs/contact.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Contact 3 | description: &description Contact the WebContainer API team 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/contact.png'}] 7 | - ['meta', {name: 'twitter:title', content: *title}] 8 | - ['meta', {name: 'twitter:description', content: *description}] 9 | --- 10 | # Contact Us 11 | 12 | For general inquiries you can reach out to us on X [@StackBlitz](https://x.com/stackblitz) or email [hello@stackblitz.com](mailto:hello@stackblitz.com). 13 | 14 | For inquiries related to free open source usage of WebContainer API [please fill out this form](https://forms.default.com/360757) and we will reach out! 15 | 16 | :::tip Want to discuss your commercial use case? 17 | [Reach out here to book a meeting with our WebContainer API team!](https://forms.default.com/360757) 18 | ::: -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/AttributionLinks.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 16 | 17 | 32 | 37 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: WebContainers - Dev environments. In your web app. 4 | head: 5 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/webcontainer_api.png'}] 6 | 7 | hero: 8 | name: WebContainers 9 | text: Dev environments. In your web app. 10 | tagline: Build the future of web based coding experiences, from interactive tutorials to instant production-ready dev environments. 11 | # image: 12 | # src: /logo.png 13 | # alt: VitePress 14 | actions: 15 | - theme: brand 16 | text: Get Started 17 | link: /guides/quickstart 18 | - theme: alt 19 | text: View on GitHub 20 | link: https://github.com/stackblitz/webcontainer-core 21 | --- 22 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "lib": ["ESNext", "DOM"], 8 | "moduleResolution": "Node", 9 | "strict": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "noEmit": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "noImplicitReturns": true, 17 | "skipLibCheck": true, 18 | "paths": { 19 | "@theme/*": ["./docs/.vitepress/theme/*"] 20 | }, 21 | }, 22 | "include": [ 23 | "src", 24 | // ".vitepress/**/*", // not needed because it resides in docs/** now (?) 25 | "env.d.ts", 26 | "docs/**/*", 27 | // Also need to explicitly include Markdown files to have TS intellisense work with Volar 28 | "docs/**/*.md" 29 | ], 30 | "exclude": ["node_modules/"] 31 | } -------------------------------------------------------------------------------- /docs/community-projects/builder-io-playground.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title builder.io playground 3 | description: &description Explore builder.io's visual editor fully in the browser. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | Explore builder.io's visual editor fully in the browser 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/WCUsedByOrgs/WCUsedBy.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 43 | -------------------------------------------------------------------------------- /docs/public/icons/fa-link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/Screenshot.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | 43 | -------------------------------------------------------------------------------- /docs/community-projects/vslite.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title VSLite 3 | description: &description A lighweight IDE-like experience with a fresh Node.js environment for you to play with. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | A lighweight IDE-like experience with a fresh Node.js environment for you to play with. 19 | 20 | Use terminal and write code using autocomplete-enabled editor: 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/public/img/theme/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/public/icons/fa-hand-point-up-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/🪲-bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001FAB2 Bug report" 3 | about: Create a report to help us improve! 4 | title: "[BUG]" 5 | labels: bug 6 | assignees: sylwiavargas 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots or screen recordings to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /docs/public/icons/fa-newspaper-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 StackBlitz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/community-projects/retune.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title re:tune | Community Projects 3 | description: &description AI-first software at the speed of thought, built with WebContainer API. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | The missing frontend for GPT-3, on a mission to empower everyone to build AI-first software at the speed of thought. 19 | [re:tune](https://retune.so/) is on a mission to set the stage for AI-native IDEs - building GPT-3 powered apps, without writing any code. 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/data/people.ts: -------------------------------------------------------------------------------- 1 | export interface Person { 2 | name: string; 3 | href: string; 4 | hrefAlias?: string; 5 | imgPath?: string; 6 | title?: string; 7 | } 8 | 9 | const PEOPLE = { 10 | ERIC_SIMONS: 'ERIC_SIMONS', 11 | RICH_HARRIS: 'RICH_HARRIS', 12 | SYLWIA_VARGAS: 'SYLWIA_VARGAS', 13 | } as const; 14 | type PeopleKeys = keyof typeof PEOPLE; 15 | 16 | export const people: {[key in PeopleKeys]: Person} = { 17 | ERIC_SIMONS: { 18 | name: 'Eric Simons', 19 | href: 'https://twitter.com/ericsimons40', 20 | hrefAlias: 'ericsimons40', 21 | imgPath: '/img/people/eric_simons.jpg', 22 | title: 'CEO, StackBlitz' 23 | }, 24 | RICH_HARRIS: { 25 | name: 'Rich Harris', 26 | href: 'https://twitter.com/Rich_Harris', 27 | hrefAlias: 'Rich_Harris', 28 | imgPath: '/img/people/rich_harris.jpg', 29 | title: 'Principal Software Engineer, Vercel' 30 | }, 31 | SYLWIA_VARGAS: { 32 | name: 'Sylwia Vargas', 33 | href: 'https://twitter.com/sylwiavargas', 34 | hrefAlias: 'sylwiavargas', 35 | imgPath: '/img/people/sylwia_vargas.jpg', 36 | title: 'Developer Advocate, StackBlitz' 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /docs/community-projects/stylelint-playground.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Stylelint Playgound 3 | description: &description A live playground where you can experiment with styleling rulesets using various packages. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | 19 | With Stylelint playground you can experiment with rulesets defined in different npm packages by specifying them in package.json! 20 | 21 | They are actually being installed – just as they would in your project 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/AuthButtons/AuthButtons.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 47 | -------------------------------------------------------------------------------- /docs/community-projects/clack.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title clack.cc 3 | description: &description Build your own custom CLI with a set of feature-rich components. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | Building interactive command line applications doesn't have to be so hard. `@clack/core` provides unstyled, feature-rich components designed to be a strong foundation for your custom CLIs. 19 | 20 | Of course, sometimes you just want to use something well-designed. That's why `@clack/prompts` comes out-of-the-box with beautiful prompts and a straightforward API. 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/public/icons/fa-sparkles-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-head-side-brain-regular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/community-projects/schachnovelle.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title schachnovelle | Community Projects 3 | description: &description A command line chess game written in Node.js., built with WebContainer API. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | A command line chess game written in Node.js. [Explore it yourself!](https://gitlab.com/manegame/schachnovelle) 19 | 20 | 21 | 22 | As [Manus Nijhoff](https://manusnijhoff.nl/), the author of this chess game, puts it, “If you've got nothing better to do than waste time in the terminal, StackBlitz is there with you!” 23 | -------------------------------------------------------------------------------- /docs/community-projects/angular-tutorial.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Angular Tutorial 3 | description: &description The official Angular Tutorial at angular.dev. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | This interactive tutorial will teach you the basic building blocks to start building great apps with Angular. 19 | 20 | You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular. 21 | 22 | Each step represents a concept in Angular. You can do one, or all of them. 23 | 24 | If you get stuck, click "Reveal answer" at the top. 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/CardLists/CardList.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /docs/public/icons/fa-users.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/public/icons/fa-github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-books-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/public/icons/fa-life-ring.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Features/FeaturesCard.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webcontainer-docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.ts", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "vitepress dev docs", 9 | "docs:build": "vitepress build docs", 10 | "serve": "vitepress serve docs" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "@types/gtag.js": "^0.0.12", 17 | "@types/node": "^18.11.17", 18 | "@vue/tsconfig": "^0.1.3", 19 | "dotenv": "^16.0.3", 20 | "markdown-it-footnote": "^3.0.3", 21 | "sass": "^1.58.0", 22 | "vite": "^4.1.0", 23 | "vitepress": "^1.0.0-rc.20" 24 | }, 25 | "dependencies": { 26 | "@codemirror/autocomplete": "^6.4.0", 27 | "@codemirror/commands": "^6.2.0", 28 | "@codemirror/lang-javascript": "^6.1.3", 29 | "@codemirror/language": "^6.5.0", 30 | "@codemirror/state": "^6.2.0", 31 | "@codemirror/theme-one-dark": "^6.1.0", 32 | "@codemirror/view": "^6.8.0", 33 | "@lezer/highlight": "^1.1.3", 34 | "@webcontainer/api": "^1.1.3", 35 | "codemirror": "^6.0.1", 36 | "p-defer": "^4.0.0", 37 | "xterm": "^5.1.0", 38 | "xterm-addon-fit": "^0.7.0", 39 | "xterm-addon-web-links": "^0.8.0" 40 | }, 41 | "pnpm": { 42 | "peerDependencyRules": { 43 | "ignoreMissing": [ 44 | "@algolia/client-search" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/AuthButtons/linkStyles.scss: -------------------------------------------------------------------------------- 1 | 2 | .link { 3 | --outline-color-hsl: 0, 0%, 100%; 4 | --outline-opacity: 0.08; 5 | --text-strong-color: #fff; 6 | display: flex; 7 | align-items: center; 8 | height: 36px; 9 | padding: 0 20px; 10 | border-radius: 8px; 11 | color: var(--text-strong-color); 12 | font-size: 13px; 13 | font-weight: 500; 14 | text-decoration: none; 15 | box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity)); 16 | background-color: hsla(224, 32%, 28%, 0.24); 17 | backdrop-filter: blur(8px); 18 | transition: 0.1s ease; 19 | transition-property: background-color, box-shadow, color; 20 | } 21 | 22 | .light { 23 | &:hover { 24 | --outline-opacity: 0.14; 25 | color: var(--text-strong-color); 26 | background-color: hsla(224, 32%, 28%, 0.54); 27 | } 28 | :root:not(.dark) & { 29 | --outline-color-hsl: 224, 32%, 28%; 30 | --outline-opacity: 0.1; 31 | color: hsl(240, 6%, 23%); 32 | background-color: hsla(224, 32%, 28%, 0.1); 33 | &:hover { 34 | --outline-opacity: 0.2; 35 | background-color: transparent; 36 | } 37 | } 38 | } 39 | 40 | .accent { 41 | --outline-opacity: 0.14; 42 | color: var(--text-strong-color); 43 | background-color: hsl(214, 87%, 51%); 44 | &:hover { 45 | --outline-opacity: 0.24; 46 | background-color: hsl(208, 100%, 53%); 47 | } 48 | } -------------------------------------------------------------------------------- /docs/public/icons/fa-gear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Icons/LoadingIcon.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | 17 | 57 | -------------------------------------------------------------------------------- /docs/community-projects/sveltekit.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title SvelteKit | Community Projects 3 | description: &description A full educational experience of learning Svelte in the browser, built with WebContainer API. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 19 | 20 | 21 | 22 | A full educational experience of learning Svelte in the browser. [Try it yourself!](https://learn.svelte.dev/tutorial/welcome-to-svelte) 23 | 24 | 25 | 26 | 32 | 33 | -------------------------------------------------------------------------------- /docs/community-projects/all-projects.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Community Projects 3 | description: &description See what our Community have built with WebContainer API. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 14 | 15 | # {{ $frontmatter.title }} 16 | 17 | This page is a tribute to our Community who have been using WebContainers over the past two years - and who have been building with WebContainer API since it was released in June 2022 in a private alpha. Here are some of the projects that are powered by it. 18 | 19 | ::: tip Get your project featured! 20 | Have a project you'd like us to showcase here and on our social media? Reach out to our [Developer Advocates](https://github.com/stackblitz/webcontainer-docs/issues/new?assignees=sylwiavargas&labels=documentation&template=%E2%9C%A8-feature-your-project.md&title=%5B%E2%9C%A8+Project+submission%5D)! 21 | ::: 22 | 23 | ## Projects built with WebContainers 24 | 25 | 26 | 27 |
28 | 29 | ::: tip Get your project featured! 30 | Have a project you'd like us to showcase here and on our social media? Reach out to our [Developer Advocates](https://github.com/stackblitz/webcontainer-docs/issues/new?assignees=sylwiavargas&labels=documentation&template=%E2%9C%A8-feature-your-project.md&title=%5B%E2%9C%A8+Project+submission%5D)! 31 | ::: -------------------------------------------------------------------------------- /docs/community-projects/api-security-academy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title API Security Academy | Community Projects 3 | description: &description An interactive learning platform focusd on GraphQL security. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 16 | 17 | 18 | 19 | The API Security Academy is a new interactive learning platform focused on mastering GraphQL security. Developed by one of [Escape](https://escape.tech)'s engineers, it's built for all levels of expertise, from a beginner to an experienced developer. 20 | 21 | Each WebContainer contains a live GraphQL application, so learners will not only understand why a vulnerability is risky, but also how to exploit it and, most importantly, how to fix it. 22 | 23 | And it’s free, interactive, and open-source! The goal is to improve collaboration and engagement in the GraphQL community! 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/community-projects/otto-engineer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Otto Engineer | Community Projects 3 | description: &description The AI sidekick that tests its own code and iterates until it works. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | 19 | Otto Engineer is an autonomous agent that takes AI-assisted coding to the next level. 20 | 21 | * **Otto checks its work and iterates**: Otto executes its code and tests it to make sure it works. If there are errors, it will keep iterating until the code works 🦾 22 | * **Otto executes its code safely in isolation**: Otto is built on [Web Containers](https://webcontainers.io/guides/introduction), a runtime for executing Node.js and OS commands that runs entirely in the browser, with a virtual, in-memory file system 🤓 23 | * **Otto requires zero setup**: Since it all runs in the browser, you just start a new chat and put Otto to work, watching it run commands and edit code in the embedded terminal and editor 🔥 24 | * **Otto operates in a real environment**: Otto can install and use npm packages, tweak its TS config, and write its own tests. Say goodbye to hallucinated code that doesn't actually work 👋 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/AttributionLink.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | 23 | 73 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/CardLists/CardSingle.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/content.scss: -------------------------------------------------------------------------------- 1 | .vp-doc h1 { 2 | margin-bottom: 24px; 3 | } 4 | 5 | .vp-doc h2 { 6 | margin: 44px 0 24px; 7 | border-top: 1px solid var(--vp-c-divider-light); 8 | padding-top: 24px; 9 | } 10 | 11 | // Wrap code examples 12 | .vp-doc [class*='language-'] pre, 13 | .vp-doc [class*='language-'] code { 14 | white-space: pre-wrap; 15 | // break contiguous strings if there was no break opportunity (e.g. whitespace, hyphens or slashes) 16 | word-break: break-word; 17 | } 18 | 19 | .vp-doc td, 20 | .vp-doc th { 21 | font-size: 14px; 22 | line-height: 1.5; 23 | &.no-break { 24 | white-space: nowrap; 25 | } 26 | } 27 | 28 | .vp-doc img { 29 | margin: 8px 0; 30 | } 31 | 32 | .vp-doc figure { 33 | margin-top: 1.5rem; 34 | margin-bottom: 1.5rem; 35 | } 36 | 37 | .vp-doc figcaption { 38 | padding: 0.75rem 1.25rem; 39 | font-size: 87%; 40 | border-radius: 8px; 41 | background-color: var(--vp-c-bg-soft); 42 | } 43 | 44 | @media (min-width: 600px) { 45 | .vp-doc .float-left { 46 | float: left; 47 | max-width: 50%; 48 | margin-top: 1rem; 49 | margin-bottom: 1.5rem; 50 | margin-right: 1.5rem; 51 | } 52 | .vp-doc .float-right { 53 | float: right; 54 | max-width: 50%; 55 | margin-top: 1rem; 56 | margin-bottom: 1.5rem; 57 | margin-left: 1.5rem; 58 | } 59 | } 60 | 61 | // Function/variable names in titles 62 | .vp-doc var { 63 | font-family: var(--vp-font-family-mono); 64 | font-weight: inherit; 65 | font-style: inherit; 66 | small { 67 | padding-inline: 0.4ch; 68 | font-weight: normal; 69 | font-size: 90%; 70 | color: var(--vp-c-text-2); 71 | } 72 | } 73 | 74 | .vp-doc .footnotes-sep { 75 | margin: 44px 0 32px; 76 | border-top: 1px solid var(--vp-c-divider-light); 77 | } 78 | 79 | .vp-doc .footnotes { 80 | p { 81 | margin: 0.75em 0; 82 | font-size: 14px; 83 | line-height: 24px; 84 | } 85 | } 86 | 87 | .content-container .VPDocFooter { 88 | margin-top: 30px; 89 | } 90 | 91 | .VPPage { 92 | overflow-x: hidden; 93 | } -------------------------------------------------------------------------------- /docs/public/img/testimonials/suborbital.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/guides/api-support.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title API Versioning and Support 3 | description: &description The WebContainer API has a deprecation policy. 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-api_support.png'}] 7 | - ['meta', {name: 'twitter:title', content: *title}] 8 | - ['meta', {name: 'twitter:description', content: *description}] 9 | --- 10 | 11 | # API Versioning and Support 12 | 13 | _Last Updated: January 2024_ 14 | 15 | **TL;DR**: if there is ever a major change in the underlying runtime, applications _might_ need to upgrade their version of `@webcontainer/api`. 16 | 17 | The WebContainer API is comprised to two different components. One is the "client library" at `@webcontainer/api`, an NPM package that these docs discuss in detail. However, there is a second, implicit component that is invisible to consumers of the former: the actual implementation of the runtime, hosted on [StackBlitz](https://stackblitz.com). 18 | 19 | A good way to think about this split is to consider the difference between a REST API and the client library used to access it. That is, the difference between the [GitHub API](https://docs.github.com/en/rest) and [Octokit](https://github.com/octokit), between [AWS](https://aws.amazon.com/) and the [AWS SDK](https://aws.amazon.com/sdk-for-javascript/), etc. The versioning of these client libraries is generally straightforward, as they tend to use semantic versioning. The versioning of the underlying REST API or service is however _decoupled_ from the library: it is instead a matter of support policies. 20 | 21 | The `@webcontainer/api` library does, of course, follow semantic versioning. On the other hand, the underlying "engine" API is not explicitly exposed. **We currently do not have any plans for a future version**: should that happen, it would mean that only certain versions of the client library would target the newer runtime. Moreover, we do not have any plans to _retire_ the existing version: that would mean that older versions of the client library would cease to work. If we ever consider doing that, we will have an ample deprecation phase. 22 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 27 | 28 | 92 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | docs/build 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vitepress/dist 94 | docs/.vitepress/cache 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/Quote.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | -------------------------------------------------------------------------------- /docs/community-projects/pkg-size.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title pkg-size 3 | description: &description Find the true size of an npm package. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 15 | 16 | 17 | 18 | 19 | 20 | Find the true size of an npm package. 21 | 22 | # Why? 23 | 24 | ## **For Package Users** 25 | 26 | ### Get Insights 27 | * **Get insights:** Package dependencies can be deceiving—a package with one direct dependency may actually install 100 indirect dependencies. Find out everything getting installed. 28 | 29 | ### Install Cost 30 | * **Install cost:** The size of `node_modules` can easily get out of control. Be mindful of what you're installing and keep it in check. 31 | 32 | ### Bundle Cost 33 | * **Bundle cost:** Importing a large dependency to your web app can easily impact its performance. It can bloat your app, slow-down load time, and increase memory usage. Optimize for ESM packages that are tree-shakeable. 34 | 35 | ### **For Package Authors** 36 | 37 | ### Install Speed 38 | * **Install speed:** This is especially important if your package is used by CLI tools that can be loaded with [npx](https://docs.npmjs.com/cli/v8/commands/npx). 39 | 40 | ### Unideal Environments 41 | * **Unideal environments:** Your package may be downloaded with slow internet, on slow devices, with little storage. It may even be downloaded within the browser via WebContainers. 42 | 43 | ### Security 44 | * **Security:** Keeping dependencies to a minimum will reduce points of failure: unexpected breaking changes, malicious code, and dependency bloat. 45 | 46 | -------------------------------------------------------------------------------- /docs/community-projects/stackblitz-codeflow.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title StackBlitz Codeflow | Community Projects 3 | description: &description Full-featured version of the desktop Visual Studio Code IDE built with WebContainer API. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 20 | 21 | 22 | 23 | [Codeflow IDE](https://developers.stackblitz.com/codeflow) is a full-featured version of the desktop Visual Studio Code IDE supporting git commands, desktop extensions and a Node.js development server with terminal. This entire docs site was built entirely in [Codeflow IDE](https://developers.stackblitz.com/codeflow). 24 | 25 | 26 | 27 | 33 | 34 | 35 | 41 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Buttons/CTAButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | 20 | 80 | -------------------------------------------------------------------------------- /docs/community-projects/stackblitz-web-publisher.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title StackBlitz Web Publisher | Community Projects 3 | description: &description A low-code publishing tool that makes editing docs or blogs pleasant, built with WebContainer API. 4 | outline: [2, 3] 5 | head: 6 | - ['meta', {property: 'og:title', content: *title}] 7 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}] 8 | - ['meta', {name: 'twitter:title', content: *title}] 9 | - ['meta', {name: 'twitter:description', content: *description}] 10 | --- 11 | 19 | 20 | 21 | 22 | A publishing tool which makes editing docs, blogs and other markdown-driven projects more pleasant for developers, and accessible for non-developers. 23 | See a real-time view of your changes as you edit, and push to your repository seamlessly, with only a few clicks. 24 | 25 | In fact, you can try it yourself by [editing this page](https://stackblitz.com/~/github.com/stackblitz/webcontainer-docs/edit/main/docs/community-projects/stackblitz-web-publisher.md?initialPath=%2Fcommunity-projects%2Fstackblitz-web-publisher)! 26 | 27 | 28 | 29 | 35 | 36 | -------------------------------------------------------------------------------- /docs/public/icons/fa-lightbulb-on-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/tutorial/5-editing-a-file-updating-the-iframe.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Editing a file and updating the iframe in WebContainers 3 | description: &description Your Express app is up and running in WebContainers, but if you edit the `textarea`, the changes are not reflected in the Preview window at all. Let's change that. 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/tutorial-5_editing_a_file_updating_the_iframe.png'}] 7 | - ['meta', {name: 'twitter:title', content: *title}] 8 | - ['meta', {name: 'twitter:description', content: *description}] 9 | --- 10 | # {{ $frontmatter.title }} 11 | 12 | Your Express app is up and running in WebContainers, but if you edit the `textarea`, the changes are not reflected in the Preview window at all. Let's change that. 13 | 14 | ## 1. Create a function to write a file 15 | 16 | To change the contents of a file, you will use the `fs.writeFile` method. 17 | 18 | In this case, you're editing only `index.js` so the function will be quite concise. 19 | 20 | ```js [main.js] 21 | /** @param {string} content*/ 22 | 23 | async function writeIndexJS(content) { 24 | await webcontainerInstance.fs.writeFile('/index.js', content); 25 | }; 26 | ``` 27 | 28 | ## 2. Listen to `textarea` changes 29 | 30 | Now that you have a function to write the file, you can listen to `textarea` value change and call this function. To do so, attach the `input` event listener to the `textareaEl`: 31 | 32 | ```js {4-6} 33 | window.addEventListener('load', async () => { 34 | textareaEl.value = files['index.js'].file.contents; 35 | 36 | textareaEl.addEventListener('input', (e) => { 37 | writeIndexJS(e.currentTarget.value); 38 | }); 39 | }); 40 | ``` 41 | 42 | Try changing the emoji now. 43 | 44 | ![An app with a textarea showing express js index.js code on left, and its output on right side using an iframe](./images/10-edited-file.png) 45 | 46 | And voilà! We have a working editor with the Preview. You've built your own environment! 47 | 48 | ## Next steps 49 | 50 | Your application is now entirely up and running. However, it would be nice if you could see the output of all the commands inside your application instead of inside the DevTools console. [In the next step](./6-connect-a-terminal.md), you'll attach a terminal to the WebContainer processes to show the output. 51 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of conduct 2 | 3 | ## Introduction 4 | 5 | We welcome contributions from folks from all skill levels and expertise. We are especially welcoming to new programmers and to folks who have a keen interest in growing as technical writers or DocOps engineers. 6 | 7 | We are a community that prioritizes a harassment-free experience for everyone. 8 | 9 | ## Our Standards 10 | 11 | Examples of behavior that contributes to **fostering a positive environment** include: 12 | 13 | - Using welcoming and inclusive language 14 | - Being respectful of differing viewpoints and experiences 15 | - Referring to people by their preferred pronouns and using gender-neutral pronouns when uncertain 16 | - Gracefully accepting constructive criticism 17 | - Focusing on what is best for the community 18 | - Showing empathy towards other community members 19 | 20 | Examples of **unacceptable behavior** by participants include: 21 | 22 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 23 | - Trolling, insulting/derogatory comments, and personal or political attacks 24 | - Public or private harassment 25 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 26 | - Other conduct which could reasonably be considered inappropriate in a professional setting 27 | - Dismissing or attacking inclusion-oriented requests 28 | 29 | **We prioritize marginalized people's safety over privileged people's comfort.** We will not act on complaints regarding: 30 | 31 | - ‘Reverse’ -isms, including ‘reverse racism,’ ‘reverse sexism,’ and ‘cisphobia’ 32 | - Reasonable communication of boundaries, such as 'leave me alone,' 'go away,' or 'I’m not discussing this with you.' 33 | - Someone’s refusal to explain or debate social justice concepts 34 | - Criticisms of racist, sexist, cissexist, or otherwise oppressive behavior or assumptions 35 | 36 | In community communication, we do not appreciate any form of aggression (passive aggression included) — please don't post if you can't be kind and empathetic. Be proactive about owning your mistakes and apologizing if you have a feeling or know that you impacted someone in a negative way. 37 | 38 | ## Attribution 39 | 40 | This Code of Conduct is adapted from: 41 | 42 | - [Write/Speak/Code](https://www.writespeakcode.com/code-of-conduct/) 43 | - [Dev.to](https://dev.to/code-of-conduct) -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Examples/WCEmbed/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Checks if WebContainer is supported on the current browser. 3 | */ 4 | export function isWebContainerSupported() { 5 | const hasSharedArrayBuffer = 'SharedArrayBuffer' in window; 6 | const looksLikeChrome = navigator.userAgent.toLowerCase().includes('chrome'); 7 | const looksLikeFirefox = navigator.userAgent.includes('Firefox'); 8 | const looksLikeSafari = navigator.userAgent.includes('Safari'); 9 | 10 | if (hasSharedArrayBuffer && (looksLikeChrome || looksLikeFirefox)) { 11 | return true; 12 | } 13 | 14 | if (hasSharedArrayBuffer && looksLikeSafari) { 15 | // we only support Safari 16.4 and up so we check for the version here 16 | const match = navigator.userAgent.match(/Version\/(\d+)\.(\d+) (?:Mobile\/.*?)?Safari/); 17 | const majorVersion = match ? Number(match?.[1]) : 0; 18 | const minorVersion = match ? Number(match?.[2]) : 0; 19 | 20 | return majorVersion > 16 || (majorVersion === 16 && minorVersion >= 4); 21 | } 22 | 23 | // Allow overriding the support check with localStorage.webcontainer_any_ua = 1 24 | try { 25 | return Boolean(localStorage.getItem('webcontainer_any_ua')); 26 | } catch { 27 | return false; 28 | } 29 | } 30 | 31 | /** 32 | * Wraps the provided `text` taking the number of max length into account. 33 | * 34 | * @param text - The text to wrap. 35 | * @param maxLength - The maximum length per line. 36 | */ 37 | export function wordWrap(text: string, maxLength: number) { 38 | const lines = text.split('\n'); 39 | 40 | const result: string[] = []; 41 | 42 | for (const line of lines) { 43 | if (line.length <= maxLength) { 44 | result.push(line); 45 | 46 | continue; 47 | } 48 | 49 | // find the first occurence of a space while going back in the sentence starting at the max length position 50 | let index = maxLength; 51 | 52 | while (index > 0 && line.charAt(index) !== ' ') { 53 | index--; 54 | } 55 | 56 | if (index === 0) { 57 | // if no space was found, just push the entire line as we can't wrap 58 | result.push(line); 59 | } else { 60 | // if a space was found, grab the first part of the line and wrap the second part again 61 | result.push( 62 | line.slice(0, index), 63 | wordWrap(line.slice(index + 1), maxLength) 64 | ); 65 | } 66 | } 67 | 68 | return result.join('\n'); 69 | } 70 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Icons/SupportIcon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 54 | 55 | 82 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Helpers/CommunityProjectPageHeading.vue: -------------------------------------------------------------------------------- 1 | 11 | 25 | 26 | 39 | 40 | 88 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/WCUsedByProjects/ProjectsUsingWCCard.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /docs/enterprise.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Commercial Usage 3 | description: &description Supercharge your production Node.js apps with a zero-footprint backend that eliminates the need for servers, boots in milliseconds, and provides 0ms latency backend connectivity. With WebContainer API you can create experiences that were previously impossible for your customers, employees and partners. 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/commercial_usage.png'}] 7 | - ['meta', {name: 'twitter:title', content: *title}] 8 | - ['meta', {name: 'twitter:description', content: *description}] 9 | --- 10 | # Commercial Usage 11 | The WebContainer API is powering a new class of in-browser experiences from interactive tutorials, to code editors, and advanced AI applications. 12 | 13 | Our secure and scalable API is designed to be integrated into your core application and scale effortlessly to millions of users thanks to our patented in-browser compute model. 14 | 15 | If you're considering the API for commercial, for-profit use, you're in the right place. 16 | 17 | :::tip Want to discuss your commercial use case? 18 | [Reach out here to book a meeting with our WebContainer API team!](https://forms.default.com/360757) 19 | ::: 20 | 21 | ## Who needs a commercial WebContainer API license? 22 | Licensing is required for *production* usage of the API in a commercial, for-profit setting. (Prototypes or POCs do not require a commercial license.) If you're using the API to meet the needs of your customers, prospective customers, and/or employees, you need a license to ensure compliance with our [Terms of Service](https://stackblitz.com/terms-of-service). Usage of the API in violation of these terms may result in your access being revoked. 23 | 24 | ## WebContainer API for Enterprise 25 | For the most security conscious organizations in the world, the WebContainer API Enterprise offering provides the features you need to meet the requirements of your security team: 26 | - Self hosted, on-premises, and VPC installation options behind the firewall 27 | - Use your private packages with support for private NPM registries 28 | - Enterprise SSO - Integrate with any SAML2-based authentication provider 29 | - Priority implementation & uptime support from our team 30 | 31 | 32 | Ready to supercharge your production Node.js apps? Contact us to see if your use case is a good fit and learn more about our pricing and support options. 33 | 34 | [Start a conversation!](https://forms.default.com/360757) -------------------------------------------------------------------------------- /docs/public/img/components/ExampleBrowser/example-browser-search_bar_icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/tutorial/4-running-dev-server.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Running dev server in WebContainers 3 | description: &description Now that your app is able to install dependencies, you can run the dev server. 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/tutorial-4_running_dev_server.png'}] 7 | - ['meta', {name: 'twitter:title', content: *title}] 8 | - ['meta', {name: 'twitter:description', content: *description}] 9 | --- 10 | # {{ $frontmatter.title }} 11 | 12 | Now that your app is able to install dependencies, you can run the dev server. Let's add some code that will: 13 | 14 | 1. run `npm run dev`, 15 | 2. listen to `server-ready` event, 16 | 3. and then assign URL to the iframe. 17 | 18 | WebContainers expose the `server-ready` event, which is emitted when the server is ready to accept requests. You can listen to this event using `webcontainerInstance.on`. 19 | 20 | Let's add this code to the `main.js` file 21 | ::: code-group 22 | 23 | ```js [main.js] 24 | async function startDevServer() { 25 | // Run `npm run start` to start the Express app 26 | await webcontainerInstance.spawn('npm', ['run', 'start']); 27 | 28 | // Wait for `server-ready` event 29 | webcontainerInstance.on('server-ready', (port, url) => { 30 | iframeEl.src = url; 31 | }); 32 | } 33 | ``` 34 | 35 | ::: 36 | 37 | In your browser dev tools, after you run `startDevServer()` in the next step, you will be able to see the dev server running: 38 | 39 | ![Browser console shows dependency installation output and reads: "App is live at http://localhost:3111"](./images/8-express-app-webcontainers.png) 40 | 41 | Remember the `iframeEl` you defined at the beginning of this tutorial? Now is the time for it to shine! You are setting the `iframeEl`'s `src` to the URL of the Express app, which will print its output in the iframe. 42 | 43 | Let's call the function in the event listener: 44 | 45 | ::: code-group 46 | 47 | ```js {12} [main.js] 48 | window.addEventListener('load', async () => { 49 | textareaEl.value = files['index.js'].file.contents; 50 | // Call only once 51 | webcontainerInstance = await WebContainer.boot(); 52 | await webcontainerInstance.mount(files); 53 | 54 | const exitCode = await installDependencies(); 55 | if (exitCode !== 0) { 56 | throw new Error('Installation failed'); 57 | }; 58 | 59 | startDevServer(); 60 | }); 61 | ``` 62 | 63 | Your Express app is running inside WebContainers! 64 | 65 | ![Now the right box, so far empty, features the output of the Express server: "Welcome to a WebContainers app! 🥳"](./images/9-server-output.png) 66 | 67 | ## Next step 68 | 69 | Congratulations! You have an Express app running in your browser with WebContainers 🥳 [In the next step](./5-editing-a-file-updating-the-iframe.md), you'll edit the files. 70 | -------------------------------------------------------------------------------- /docs/public/img/logos/google-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/public/img/logos/google-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/public/img/theme/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | scroll-padding-top: calc(var(--vp-nav-height-desktop) + 30px); 3 | --content-max-width: 1480px; 4 | } 5 | 6 | :root { 7 | // Highlight color (links, some borders or hover effects) 8 | --vp-c-brand: hsl(200 80% 38%); 9 | --vp-c-brand-light: hsl(195 85% 42%); 10 | --vp-c-brand-lighter: hsl(190 90% 48%); 11 | --vp-c-brand-dark: hsl(200 80% 32%); 12 | --vp-c-brand-darker: hsl(200 70% 24%); 13 | // Custom highlight colors (used on home page) 14 | --sb-foreground-highlight: hsl(210 90% 50%); 15 | --sb-foreground-highlight-high: hsl(190 100% 50%); 16 | 17 | // Contrast fixes 18 | --vp-custom-block-info-text: hsl(220 10% 36%); 19 | --vp-custom-block-warning-text: hsl(45, 90%, 28%); 20 | --vp-custom-block-tip-text: hsl(106, 37%, 27%); 21 | 22 | // Greys 23 | --vp-c-gray-dark-2: rgb(186, 194, 210); 24 | 25 | // rc.20 26 | --vp-c-brand-1: var(--vp-c-brand); 27 | --vp-c-brand-2: var(--vp-c-brand-light); 28 | } 29 | 30 | :root.dark { 31 | // Tweak the color palette for blacks and dark grays 32 | --vp-c-black: hsl(220 20% 9%); 33 | --vp-c-black-pure: hsl(220, 24%, 4%); 34 | --vp-c-black-soft: hsl(220 16% 13%); 35 | --vp-c-black-mute: hsl(220 14% 17%); 36 | --vp-c-gray: hsl(220 8% 56%); 37 | --vp-c-gray-dark-1: hsl(220 10% 39%); 38 | --vp-c-gray-dark-2: hsl(220 12% 28%); 39 | --vp-c-gray-dark-3: hsl(220 12% 23%); 40 | --vp-c-gray-dark-4: hsl(220 14% 17%); 41 | --vp-c-gray-dark-5: hsl(220 16% 13%); 42 | 43 | // Backgrounds 44 | // --vp-c-bg: hsl(220 14% 13%); 45 | // --vp-c-bg: rgb(7, 8, 9); 46 | --vp-c-bg: rgb(7, 8, 11); 47 | --vp-c-bg-alt: hsl(220 20% 9%); 48 | --vp-c-bg-soft: hsl(220 14% 17%); 49 | --vp-c-bg-mute: hsl(220 12% 23%); 50 | --vp-custom-block-info-bg: hsl(220 14% 17%); 51 | 52 | // Highlight color (links, some borders or hover effects) 53 | --vp-c-brand: hsl(190, 100%, 58%); 54 | --vp-c-brand-light: hsl(185 100% 54%); 55 | --vp-c-brand-lighter: hsl(180 100% 60%); 56 | --vp-c-brand-dark: hsl(190 100% 42%); 57 | --vp-c-brand-darker: hsl(190 100% 36%); 58 | // Custom highlight colors (used on home page) 59 | --sb-foreground-highlight: hsl(190, 91%, 69%); 60 | --sb-foreground-highlight-high: hsl(165, 100%, 60%); 61 | // WCAPI site 62 | --wc-background-soft-light: hsla(220, 100%, 81%, 0.05); 63 | --wc-background-softer-light: hsla(220, 100%, 81%, 0.02); 64 | 65 | // Contrast fixes 66 | --vp-custom-block-info-text: hsl(220 50% 85%); 67 | --vp-custom-block-danger-text: hsl(340, 100%, 66%); 68 | --vp-custom-block-warning-text: hsl(45, 90%, 50%); 69 | --vp-custom-block-tip-text: hsl(160, 84%, 39%); 70 | 71 | // If we want to make the dividers blueish too 72 | //--vp-c-divider: var(--vp-c-divider-light-1); 73 | //--vp-c-divider-light: var(--vp-c-divider-light-2); 74 | //--vp-c-divider-inverse: var(--vp-c-divider-dark-1); 75 | //--vp-c-divider-inverse-light: var(--vp-c-divider-dark-2); 76 | 77 | // Algolia DocSearch UI 78 | --docsearch-container-background: hsl(220 24% 30% / 0.85); 79 | } 80 | -------------------------------------------------------------------------------- /docs/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Changelog 3 | description: &description Changelog for the WebContainers API library 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {name: 'twitter:title', content: *title}] 7 | - ['meta', {name: 'twitter:description', content: *description}] 8 | 9 | --- 10 | 11 | # Changelog 12 | 13 | ## 1.5.1 14 | 15 | * Fix ESM import issue introduced in `1.4.0`. 16 | 17 | ## 1.5.0 18 | 19 | * Add support for injecting a script in previews with [`setPreviewScript`](api#▸-setPreviewScript). 20 | 21 | ## 1.4.0 22 | 23 | * Add support for exporting the file system with [`export`](api#▸-export). 24 | 25 | ## 1.3.0 26 | 27 | * Breaking change: we now throw if [`auth.init`](api#▸-init) is called after [`WebContainer.boot`](api#▸-boot) 28 | * Add [`configureAPIKey`](api#configureapikey) to use the API with an API key. 29 | * Add `stack` information to `console.error` messages coming from previews. 30 | 31 | ## 1.2.4 32 | 33 | * Bug fix: [`reloadPreview`](api#reloadpreview) was always doing a hard refresh as the port was not transferred. 34 | 35 | ## 1.2.3 36 | 37 | * Make `@webcontainer/api` ESM and SSR friendly again. 38 | * Emit preview messages on the webcontainer's [`on('preview-message')`](api#on-overloads) event handler. 39 | 40 | ## 1.2.2 41 | 42 | * Add [`reloadPreview`](api#reloadpreview) utility, also exported under `@webcontainer/api/utils`. 43 | 44 | ## 1.2.1 45 | 46 | :::warning 47 | It's recommended to use version `>= 1.2.3` to use `forwardPreviewErrors` as you cannot add an 48 | event listener in the `webcontainerInstance` in that version. 49 | ::: 50 | 51 | * Add `forwardPreviewErrors` to [`BootOptions`](api#boot-options) which lets you capture "errors" from previews. 52 | 53 | ## 1.2.0 54 | 55 | * Add support for [`authentication`](api#auth). 56 | * Add [`cwd`](api#▸-cwd-string) option to [`SpawnOptions`](api#spawnoptions). 57 | 58 | ## 1.1.8 59 | 60 | * Add [`fs.watch`](api#▸-watch). 61 | 62 | ## 1.1.7 63 | 64 | * Change compile target to ES2022 65 | 66 | ## 1.1.6 67 | 68 | * Add [`fs.rename`](api#▸-rename). 69 | * After a WebContainer instance has been [`torn down`](api#▸-teardown) you can [`boot`](api#▸-boot) it again. 70 | 71 | ## 1.1.5 72 | 73 | * Show warning with invalid `coep` settings 74 | 75 | ## 1.1.4 76 | 77 | * Add `'none'` to the list of accepted values for `coep` setting. This value can only work on Chromium-based browsers as long as an Origin Trial is supported. 78 | 79 | ## 1.1.3 80 | 81 | > No changes were made 82 | 83 | ## 1.1.2 84 | 85 | * Fix ESM support for `@webcontainer/api` by changing all imports to include the `.js` extension. 86 | 87 | ## 1.1.0 88 | 89 | * The value of the [`Cross-Origin-Embedder-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) header can be changed now with `BootOptions#coep`. 90 | * The name of the working directory can be specified through `BootOptions#workdirName`. 91 | * The default value of the `PATH` environment variable is exposed in `WebContainer#path`. 92 | * The full path of the working directory is exposed in `WebContainer#workdir`. 93 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Examples/ExampleTerminal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 116 | -------------------------------------------------------------------------------- /docs/public/img/logos/stackblitz-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/public/img/logos/stackblitz-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Testimonials/TestimonialCard.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | 30 | 125 | 126 | Non-scoped 127 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Examples/ExampleBrowser.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 107 | -------------------------------------------------------------------------------- /docs/tutorial/3-installing-dependencies.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Installing dependencies in WebContainers 3 | description: &description You can run various commands inside WebContainers like, for example, `npm install` 4 | head: 5 | - ['meta', {property: 'og:title', content: *title}] 6 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/tutorial-3_installing_dependencies.png'}] 7 | - ['meta', {name: 'twitter:title', content: *title}] 8 | - ['meta', {name: 'twitter:description', content: *description}] 9 | --- 10 | # {{ $frontmatter.title }} 11 | 12 | You can run various commands inside WebContainers like, for example, `npm install` as follows: 13 | 14 | ```js 15 | webcontainerInstance.spawn('npm', ['install']); 16 | ``` 17 | 18 | This code runs `npm` with the `install` argument inside the WebContainer instance. 19 | 20 | ::: tip Tip 21 | You can also use `pnpm` or `yarn` instead of npm. To do so, replace `npm` in the above code with your package manager of choice. 22 | ::: 23 | 24 | ## Syntax 25 | 26 | Before we begin, let's take a look at the syntax: we break down commands into their constituent parts, and then pass them to the `run` method. In this way: 27 | 28 | ```bash 29 | cd hello-world 30 | ``` 31 | 32 | becomes: 33 | 34 | ```js 35 | webcontainerInstance.spawn('cd', ['hello-world']); 36 | ``` 37 | 38 | And if you have a command with two arguments, both arguments will be added to the array, like so: 39 | ```bash 40 | ls src -l 41 | ``` 42 | 43 | becomes: 44 | ```js 45 | webcontainerInstance.spawn('ls', ['src', '-l']); 46 | ``` 47 | 48 | ## 1. Install dependencies 49 | 50 | In the `main.js` file, add an `installDependencies` function: 51 | 52 | ::: code-group 53 | 54 | ```js {11-24} [main.js] 55 | async function installDependencies() { 56 | // Install dependencies 57 | const installProcess = await webcontainerInstance.spawn('npm', ['install']); 58 | // Wait for install command to exit 59 | return installProcess.exit; 60 | } 61 | ``` 62 | 63 | ::: 64 | 65 | This function will install the dependencies and return the exit code. If it's `0`, it means the command exited successfully. 66 | 67 | ## 2. Call the function 68 | 69 | Next, call `installDependencies()` inside the event listener you wrote earlier and you can add error handling: 70 | 71 | ```js {7-10} 72 | window.addEventListener('load', async () => { 73 | textareaEl.value = files['index.js'].file.contents; 74 | // Call only once 75 | webcontainerInstance = await WebContainer.boot(); 76 | await webcontainerInstance.mount(files); 77 | 78 | const exitCode = await installDependencies(); 79 | if (exitCode !== 0) { 80 | throw new Error('Installation failed'); 81 | }; 82 | }); 83 | ``` 84 | 85 | Note that it is possible to read the output of this command. 86 | 87 | ```js 88 | const installProcess = await webcontainerInstance.spawn('npm', ['install']); 89 | 90 | installProcess.output.pipeTo(new WritableStream({ 91 | write(data) { 92 | console.log(data); 93 | } 94 | })); 95 | ``` 96 | 97 | The `output` property is capable of streaming the output. 98 | 99 | This means that, for example, by running `npm install`, you will get every single line from `npm` installing the code: 100 | 101 | ![Output of npm install logged in the dev tools console](./images/7-installing-dependencies.png) 102 | 103 | ::: info Want to learn more about `WritableStream`? 104 | 105 | For more information on the `Writable Stream`, check the Deep Dive on the ["Running Processes"](../guides/running-processes#reading-the-output) page. 106 | 107 | ::: 108 | 109 | 110 | 111 | ## Next step 112 | 113 | Your WebContainer app is now installing dependencies ✨ [In the next step](./4-running-dev-server.md), you'll run the dev server. 114 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Manual 3 | 4 | We welcome contributions from folks from all skill levels and expertise. We are especially welcoming to new programmers and to those with a keen interest in growing as technical writers or DocOps engineers. 5 | 6 | --- 7 | 8 | ## Before you begin 9 | 10 | We expect contributors to abide by our underlying [Code of Conduct](CODE_OF_CONDUCT.md). All discussions connected to our docs must be kind, respectful, and harassment-free. We will not dignify PRs or other contributions created in the spirit of disregard for the Code of Conduct. 11 | 12 | We believe that communication is the lifeblood of any Open Source project. Please use beginner-friendly language. It's very easy to misunderstand one another in asynchronous, text-based conversations. When in doubt, assume everyone has the best intentions but consider helping them do better with clarifying questions and kind feedback. Remember that for many people English is not their first language and in such communication, native English speakers are also expected to flex their "foreigner muscle". 13 | 14 | --- 15 | 16 | ## Types of Contributions 17 | 18 | There are numerous ways to contribute to docs: 19 | 20 | - **Share feedback** 21 | - Each docs page features a feedback tool at the bottom - you can use it to let us know what you think! 22 | - If you see something broken or think any section could be better or less confusing please [check if there's an issue for that already](https://github.com/stackblitz/webcontainer-docs/issues) and if not, feel free to [create one](https://github.com/stackblitz/webcontainer-docs/issues/new). 23 | - **Share ideas** 24 | - We want our docs to be delightful. If you have an idea on an improvement, reach out to us on [GitHub discussions](https://github.com/stackblitz/webcontainer-docs/discussions). 25 | - **Fix typos** 26 | - Use [Web Publisher](#content-updates-with-web-publisher) for a quick typo fix! 27 | - **Create demos** 28 | - We'd like to help our users see more examples of using WebContainer API. Would you like to create a demo? Before you do, please reach out to us on [GitHub discussions](https://github.com/stackblitz/webcontainer-docs/discussions). 29 | - **Fix an issue** 30 | - You see an issue with the docs platform you'd like to work on? Ask to be assigned to fix it. Before you start your work, please read our [contributing guide](CONTRIBUTING.md). 31 | - **Reviews** 32 | - Please feel free to check existing PRs and issues. Share your loving feedback, help the other contributor approach the task in a better way, spot lurking bugs, errors, and mistakes. You can use pr.new to that end - in the URL of the issue or PR, swap "github.com" with "pr.new" to spin up the environment and the preview. 33 | 34 | Thank you for making our docs better! 35 | 36 | ### What makes good issue 37 | 38 | When creating an issue, please include: 39 | 40 | - a descriptive title, 41 | - a link to what this issue refers to (a page, an example, a section), 42 | - if applicable, a screenshot or screen recording, 43 | - explanation of why you think it is an issue, 44 | - if you have an idea, a possible solution, 45 | - ideally, external links that explain any advanced or lesser-known topics so others can learn from your issue. 46 | 47 | Please raise issues in situations like the following: 48 | 49 | - confusing, overwhelming, or incorrect explanation, 50 | - outdated examples, 51 | - vague or missing content, 52 | - demo or page request, 53 | - compromised accessibility, 54 | - anything broken: demo, page, url, image, 55 | 56 | If what you want to say doesn't really fall into actionable "problem" or "improvement", you can **start a new Discussion topic**. For example, feel free to ask: 57 | 58 | - Could we split this page into multiple smaller steps? 59 | - This navigation item doesn't fit where it is - could we move it somewhere else? 60 | - How could we make the docs site more (adjective)? 61 | 62 | --- -------------------------------------------------------------------------------- /docs/public/img/testimonials/astro-full-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/public/img/testimonials/astro-full-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Hero/Hero.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 22 | 23 | 156 | -------------------------------------------------------------------------------- /docs/guides/running-processes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: &title Running Processes 3 | head: 4 | - ['meta', {property: 'og:title', content: *title}] 5 | - ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-running_commands.png'}] 6 | - ['meta', {name: 'twitter:title', content: *title}] 7 | --- 8 | # Running Processes 9 | 10 | This page covers executing commands inside WebContainers. 11 | 12 | ## Mental model 13 | 14 | In WebContainers, processes are executed as follows: 15 | 16 | ```js 17 | webcontainerInstance.spawn('npm', ['install']); 18 | ``` 19 | 20 | The method `spawn` takes three arguments: 21 | 22 | - a string representing the command, 23 | - an array with the command options, 24 | - and, not required, spawn options (for example, specifying environment variables, disabling output, or specifying the size of the attached terminal). 25 | 26 | In this case, we are running `npm install`. If our command had multiple arguments, like for example `ls src -l`, all the arguments would be added to the array like so: 27 | 28 | ```js 29 | webcontainerInstance.spawn('ls', ['src', '-l']); 30 | ``` 31 | 32 | ## Installing dependencies 33 | 34 | Let's take a look at the following function that, when invoked, will install dependencies in a WebContainer instance: 35 | 36 | ```js 37 | async function installDependencies() { 38 | // Install dependencies 39 | const installProcess = await webcontainerInstance.spawn('npm', ['install']); 40 | // Wait for install command to exit 41 | return installProcess.exit; 42 | } 43 | ``` 44 | 45 | Having installed the dependencies, this function will return the exit code (`0` for a successful exit). 46 | 47 | ## Reading process output 48 | 49 | Calling `spawn` returns a `WebContainerProcess`. Every process has an `output` property of type `ReadableStream` that receives all terminal output, including the `stdout` and `stderr` emitted by the spawned process and its descendants (for example, child processes). 50 | 51 | ::: info Deep dive: `ReadableStream` 52 | 53 | The output property is a `ReadableStream`. That’s because it is, in fact, a stream that can emit strings numerous times, just like the actual `stdout` or `stderr` from a process in Node.js. The advantage of streams is that they allow composition, meaning we can pipe data from one stream into another stream, for example `source.pipeTo(destination)`. Furthermore, streams can be transferred via `postMessage` from one context to a different context, for example a web worker. A `ReadableStream` also keeps a buffer of the data which is only flushed once you start reading. 54 | 55 | If you want to read data from output you can pipe it into a `WriteableStream` just like in the example below. 56 | 57 | ::: 58 | 59 | Output can be disabled by passing optional options to `spawn` and setting `output: false`. When set to `false`, the `output` stream will never receive any data. 60 | An example of a usage could be the following: 61 | 62 | ```js 63 | const installProcess = await webcontainerInstance.spawn('npm', ['install']); 64 | 65 | installProcess.output.pipeTo(new WritableStream({ 66 | write(data) { 67 | console.log(data); 68 | } 69 | })); 70 | ``` 71 | 72 | ## Running a dev server 73 | 74 | WebContainers expose three events through the method `on`: 75 | 76 | - `server-ready`, which is emitted when the server is ready to accept requests, 77 | - `port`, which is emitted when a port is open or closed by a process, 78 | - `error`, emitted when an internal error is triggered. 79 | 80 | The `server-ready` event can be used to, for example, run a dev server via `npm run start`: 81 | 82 | ```js 83 | async function startDevServer() { 84 | // Run `npm run start` to start the Express app 85 | await webcontainerInstance.spawn('npm', ['run', 'start']); 86 | 87 | // Wait for `server-ready` event 88 | webcontainerInstance.on('server-ready', (port, url) => { 89 | // ... 90 | }); 91 | } 92 | ``` 93 | 94 | ## Next steps 95 | 96 | To further explore the WebContainer API in [our WebContainer API starter](https://webcontainer.new), check the [API Reference](../api) or follow [our tutorial](../tutorial/1-build-your-first-webcontainer-app.md) and build your first WebContainer app. 97 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Hero/HeroAi.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 24 | 25 | 168 | --------------------------------------------------------------------------------