WebContainer API Docs

Welcome to the home of the WebContainer API documentation site!

Our docs site was built with VitePress 💙

What is the WebContainer API?

WebContainers are a browser-based runtime for executing Node.js applications and operating system commands. This technology enables you to build applications that previously required a server running.

WebContainer API is perfect for interactive coding experiences. Among its most common use cases are production-grade IDEs, programming tutorials, next-generation documentation, or employee onboarding platforms.

The WebContainer API starter is the fastest way to explore the API. Open it in StackBlitz editor:

or in Codeflow IDE, our full-fledged web environment:

If you prefer to develop locally, follow the steps below.

Let's make the docs better!

Thank you for visiting this repository. We love our community and we appreciate your time.

There are numerous ways to contribute to docs:

• Share feedback
  • Each docs page features a feedback tool at the bottom - you can use it to let us know what you think!
  • 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 and if not, feel free to create one.
• Share ideas
  • We want our docs to be delightful. If you have an idea on an improvement, reach out to us on GitHub discussions.
• Fix typos
  • Use Web Publisher for a quick typo fix!
• Create demos
  • 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.
• Fix an issue
  • 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.
• Reviews
  • 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.

Thank you for making our docs better!

What makes good issue

When creating an issue, please include:

• a descriptive title,
• a link to what this issue refers to (a page, an example, a section),
• if applicable, a screenshot or screen recording,
• explanation of why you think it is an issue,
• if you have an idea, a possible solution,
• ideally, external links that explain any advanced or lesser-known topics so others can learn from your issue.

Please raise issues in situations like the following:

• confusing, overwhelming, or incorrect explanation,
• outdated examples,
• vague or missing content,
• demo or page request,
• compromised accessibility,
• anything broken: demo, page, url, image,

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:

• Could we split this page into multiple smaller steps?
• This navigation item doesn't fit where it is - could we move it somewhere else?
• How could we make the docs site more (adjective)?

Development

There are three ways to interact with this repository:

• For a small content update, you can use Web Publisher.
• If you want to explore and develop this site, use StackBlitz Codeflow.
• Alternatively, you can run the docs locally.

Content updates with Web Publisher

Use Web Publisher for small content updates for a pleasant editing experience:

1. Open the page on our docs site, scroll down, and click "edit this page".
2. Update the document in the editor on the left and see the rendered change in the preview window on the right.
3. Once you're done, in the top right corner click on the green button that says "Propose changes".
4. You will be redirected to a GitHub PR template page prepared for you to submit a PR.

Developing with StackBlitz Codeflow

For bigger content updates, we recommend you use Codeflow IDE, which will spin up the entire dev environment with a dev server running. When using Codeflow, please remember to commit and push your changes frequently.

Alternatively, add “pr.new” to the beginning of this GitHub repo URL.

Developing locally

You can also explore and develop this site locally.

After cloning the repository, run the docs site in development mode with:

npm install
npm start

Editor setup

We have already equipped this repository with the suggested extension (Vue Language Features extension (Volar)). Additionally, you can use Volar’s Take Over Mode (aka disabling the built-in TypeScript and JavaScript Language Features extension for the current workspace).

Join our community

• Participate in a discussion
• Join our Discord
• Read our blog and see what we have been up to in our monthly update posts!
• Share your StackBlitz projects on Twitter!
• Reach out to our Developer Advocate on Twitter or via an email with your StackBlitz ideas, dreams, and wishes!