/ concept-collection / minwebide-demo
Sign in
concept-collection / minwebide-demo
68d072b
Branches
main
minwebide-demo
Go to fileHistoryFork
Code
Clone with HTTP

Anyone can clone. Pushing asks for a username and a token.

Download 68d072b1586012f0b36a1c4d541fc23e585dce32
Source as zipSource as tar.gz
Jeremy Magland Project picker landing page with per-project file systems 68d072b 2 Commits
.githubminwebide demo app: deploys to GitHub Pages
scriptsProject picker landing page with per-project file systems
srcProject picker landing page with per-project file systems
.gitignoreminwebide demo app: deploys to GitHub Pages
index.htmlminwebide demo app: deploys to GitHub Pages
package-lock.jsonProject picker landing page with per-project file systems
package.jsonProject picker landing page with per-project file systems
README.mdProject picker landing page with per-project file systems
tsconfig.jsonminwebide demo app: deploys to GitHub Pages
vite.config.tsminwebide demo app: deploys to GitHub Pages
README.md

minwebide-demo#

Live demo of minwebide — a minimalistic web IDE built from VS Code's own source code, with the file system persisted in your browser's IndexedDB.

Live site: https://concept-collection.github.io/minwebide-demo/

The landing page manages projects: each project is its own workspace in your browser's IndexedDB (create / rename / duplicate / delete), and the open project is addressed in the URL as #/project/<id>. Create a sample project to see the showcase content, then try:

  • Open files from the Explorer; edit and press Ctrl+S; reload — changes persist.
  • data/measurements.csv opens as a table; README.md has a markdown preview (icons in the tab bar switch representations).
  • Open scripts/sine-wave.js and press ▶: console output goes to the bottom Output panel, plots render in the secondary side bar.
  • Search across files from the activity bar.
  • The project name in the status bar takes you back to the project list.

Development#

minwebide is consumed as a sibling checkout (file:../minwebide):

git clone https://github.com/magland/minwebide ../minwebide
(cd ../minwebide && npm install)   # fetches the pinned VS Code source
npm install
npm run dev

CI does the same: the deploy workflow checks out magland/minwebide next to this repo, installs both, builds, and publishes dist/ to GitHub Pages.

↑↓ move↵openescclose