Webdash logo

webdash

Get Started GitHub

Orchestrate your web project with 
Webdash - the customizable web dashboard

Webdash helps you visualize, monitor & manage your web project using community-driven plugins.

This project has been archived. If you're curious, check out one of my latest courses:

If you work with JavaScript, check out the fetch use cases and JavaScript projects.

Thank you! — Jad Joubran

Missing link chain icon

The missing link

Webdash is the missing dashboard that bridges the gap between the developer and the terminal, resulting in a much smoother & faster workflow.

Developers icon

Community driven plugins

You can create your own custom plugins in Webdash.
Here are some plugins built by the community.

Package JSON

Stay on top of your installed packages and visualize your node dependencies.

  • View installed packages
  • View exact version installed
  • Get informed on outdated packages
  • Update packages in one-click

NPM Scripts

Run your frequently used npm scripts straight from the dashboard using one-click buttons.

  • Quick-access your top 3 scripts
  • Access secondary scripts from dropdown
  • Cancel long running tasks
  • View command output

PWA Manifest

Speed up your Progressive Web App workflow by previewing your Web App Manifest.

  • Icon on homescreen
  • Splash screen
  • Status bar theme color

Performance Budget

Monitor the total size of your production JavaScript files to maintain fast performance.

  • Keep track of your performance budget
  • Customize your budget
  • Get warned when you exceed the limit
Webdash Performance Budget preview

Workbox

Generate your workbox configuration by answering questions from the wizard

  • One-click install if workbox-cli is not installed
  • Wizard asks you questions with smart defaults
  • Shows stats about your existing service worker

Readme Preview

Preview your README.md file straight from the dashboard for a seamless experience

  • Converts README.md to HTML preview
  • Supports Github flavored markdown
Webdash Readme preview
Webdash philips hue preview

Hue

Control your Philips hue lights straight from your dashboard

  • Switch lights on/off
  • Set lights' brightness
  • Enable custom presets with different settings

Embed

Embed your favorite plugins or services

  • Embed your favorite plugins
  • Setup in seconds
Webdash Embed preview

Get Started

Follow these steps to start using Webdash in your front-end project.

Switch to yarn
#webdash core (requires node >= 8)
npm install --save-dev webdash
#webdash plugins
npm install --save-dev webdash-package-json webdash-npm-scripts webdash-performance-budget webdash-pwa-manifest webdash-readme-preview webdash-workbox webdash-hue webdash-embed
#serve
npx webdash serve

Create a plugin

Using the Webdash plugin generator, you can easily create your own plugins. Follow the Create a plugin guide on GitHub.