diff --git a/package.json b/package.json
index 5ceee45f..e103746d 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     ]
   },
   "bundleDependencies": false,
-  "dependencies": {},
   "devDependencies": {
     "lerna": "^4.0.0"
   },
diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
index ad8a7235..359bd1b2 100644
--- a/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
+++ b/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
@@ -1,7 +1,202 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`webpack.config.js adds devServer config when passing the --dev-server flag 1`] = `
+Object {
+  "devServer": Object {
+    "compress": true,
+    "contentBase": "/config/webpack/public",
+    "port": 3000,
+  },
+  "devtool": "source-map",
+  "entry": Object {
+    "main": Object {
+      "filename": "index.js",
+      "import": "./src/index.js",
+      "library": Object {
+        "type": "commonjs2",
+      },
+    },
+  },
+  "externals": Object {
+    "read-pkg": "commonjs2 read-pkg",
+    "read-pkg-up": "commonjs2 read-pkg-up",
+    "resolve-bin": "commonjs2 resolve-bin",
+  },
+  "mode": "development",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "exclude": /node_modules\\\\/\\(\\?!\\(@10up\\\\/block-components\\)\\\\/\\)\\.\\*/,
+        "test": /\\^\\(\\?!\\.\\*\\\\\\.d\\\\\\.tsx\\?\\$\\)\\.\\*\\\\\\.\\[tj\\]sx\\?\\$/,
+        "use": Array [
+          "/node_modules/thread-loader/dist/cjs.js",
+          Object {
+            "loader": "/node_modules/babel-loader/lib/index.js",
+            "options": Object {
+              "babelrc": false,
+              "cacheDirectory": true,
+              "configFile": false,
+              "presets": Array [
+                Array [
+                  "/packages/babel-preset-default/index.js",
+                  Object {
+                    "targets": Array [
+                      "> 1%",
+                      "ie >= 11",
+                      "Firefox ESR",
+                      "last 2 versions",
+                    ],
+                    "useBuiltIns": false,
+                    "wordpress": true,
+                  },
+                ],
+              ],
+              "sourceType": "unambiguous",
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.svg\\$/,
+        "use": Array [
+          "@svgr/webpack",
+          "url-loader",
+        ],
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/postcss-loader/dist/cjs.js",
+            "options": Object {
+              "postcssOptions": Object {
+                "config": "/config/postcss.config.js",
+              },
+            },
+          },
+        ],
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/postcss-loader/dist/cjs.js",
+            "options": Object {
+              "postcssOptions": Object {
+                "config": "/config/postcss.config.js",
+              },
+            },
+          },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+        "type": "asset/resource",
+      },
+    ],
+  },
+  "optimization": Object {
+    "concatenateModules": false,
+    "minimizer": Array [
+      TerserPlugin: {"test":{},"extractComments":true,"parallel":true,"terserOptions":{"parse":{"ecma":8},"compress":{"ecma":5,"warnings":false,"comparisons":false,"inline":2}}},
+    ],
+  },
+  "output": Object {
+    "path": "/dist",
+  },
+  "performance": Object {
+    "hints": "warning",
+    "maxAssetSize": 10240000,
+    "maxEntrypointSize": 40960000,
+  },
+  "plugins": Array [
+    HtmlWebpackPlugin: {},
+    ESLintWebpackPlugin: {"extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"fix":false},
+    MiniCssExtractPlugin: {"ignoreOrder":false,"chunkFilename":"[id].css"},
+    ImageminPlugin: {"disable":true,"imageminOptions":{"plugins":[null,null,null,null]},"externalImages":{"context":".","sources":[],"destination":".","fileName":null},"cacheFolder":null},
+    StylelintWebpackPlugin: {"files":"**/*.(s(c|a)ss|css)","stylelintPath":"stylelint","context":"/assets","allowEmptyInput":true,"configFile":"/config/stylelint.config.js"},
+    WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null},
+    CleanExtractedDeps: {},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "lodash-es": "lodash",
+    },
+    "extensions": Array [
+      ".tsx",
+      ".ts",
+      ".js",
+    ],
+  },
+  "stats": Object {
+    "all": false,
+    "assets": true,
+    "errorDetails": true,
+    "errors": true,
+    "excludeAssets": /\\\\\\.\\(jpe\\?g\\|png\\|gif\\|svg\\|woff\\|woff2\\)\\$/i,
+    "moduleTrace": true,
+    "modules": true,
+    "performance": true,
+    "warnings": true,
+  },
+  "target": "browserslist:> 1%, ie >= 11, Firefox ESR, last 2 versions",
+}
+`;
+
 exports[`webpack.config.js properly detects user config files in package mode 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -177,6 +372,7 @@ Object {
 
 exports[`webpack.config.js properly detects user config files in project mode 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "entry1": "entry1.js",
@@ -341,6 +537,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for package config 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -537,6 +734,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for package config with commonjs2 format 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -725,6 +923,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for package config with peer deps 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -922,6 +1121,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for project configs 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "entry1": "entry1.js",
diff --git a/packages/toolkit/config/__tests__/webpack.config.js b/packages/toolkit/config/__tests__/webpack.config.js
index 134afa75..e04e0200 100644
--- a/packages/toolkit/config/__tests__/webpack.config.js
+++ b/packages/toolkit/config/__tests__/webpack.config.js
@@ -192,4 +192,30 @@ describe('webpack.config.js', () => {
 
 		expect(webpackConfig).toMatchSnapshot();
 	});
+
+	it('adds devServer config when passing the --dev-server flag', () => {
+		process.argv.push('--dev-server');
+		process.argv.push('--port=3000');
+		getBuildFilesMock.mockReturnValue({});
+		getPackageMock.mockReturnValue({
+			name: '@10up/component-library',
+			source: 'src/index.js',
+			main: 'dist/index.js',
+			'umd:main': 'dist/index.umd.js',
+			dependencies: {
+				'read-pkg': '^5.2.0',
+				'read-pkg-up': '^1.0.1',
+				'resolve-bin': '^0.4.0',
+			},
+		});
+
+		let webpackConfig;
+		jest.isolateModules(() => {
+			// eslint-disable-next-line global-require
+			webpackConfig = require('../webpack.config');
+		});
+
+		expect(webpackConfig).toMatchSnapshot();
+		process.argv.pop();
+	});
 });
diff --git a/packages/toolkit/config/webpack.config.js b/packages/toolkit/config/webpack.config.js
index 71d754c3..9ac5784e 100644
--- a/packages/toolkit/config/webpack.config.js
+++ b/packages/toolkit/config/webpack.config.js
@@ -18,6 +18,7 @@ const {
 	getResolve,
 	getTarget,
 	getPerfomance,
+	getDevServer,
 } = require('./webpack');
 
 const projectConfig = getTenUpScriptsConfig();
@@ -46,6 +47,7 @@ const config = {
 module.exports = {
 	devtool: isProduction ? false : 'source-map',
 	mode,
+	devServer: getDevServer(config),
 	entry: getEntryPoints(config),
 	output: getOutput(config),
 	target: getTarget(config),
diff --git a/packages/toolkit/config/webpack/devServer.js b/packages/toolkit/config/webpack/devServer.js
new file mode 100644
index 00000000..9ae82fbd
--- /dev/null
+++ b/packages/toolkit/config/webpack/devServer.js
@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = ({ projectConfig: { devServer, devServerPort } }) => {
+	if (!devServer) {
+		return undefined;
+	}
+
+	return {
+		contentBase: path.join(__dirname, 'public'),
+		compress: true,
+		port: Number(devServerPort),
+	};
+};
diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js
index 1f7c068b..f6fed467 100644
--- a/packages/toolkit/config/webpack/entry.js
+++ b/packages/toolkit/config/webpack/entry.js
@@ -3,6 +3,7 @@ const removeDistFolder = (file) => {
 };
 module.exports = ({
 	isPackage,
+	projectConfig: { devServer },
 	packageConfig: { packageType, source, main, umd, libraryName },
 	buildFiles,
 }) => {
@@ -19,7 +20,7 @@ module.exports = ({
 			};
 		}
 
-		if (umd) {
+		if (umd && !devServer) {
 			config.umd = {
 				filename: removeDistFolder(umd),
 				import: `./${source}`,
diff --git a/packages/toolkit/config/webpack/index.js b/packages/toolkit/config/webpack/index.js
index 65bc4feb..e15eda13 100644
--- a/packages/toolkit/config/webpack/index.js
+++ b/packages/toolkit/config/webpack/index.js
@@ -8,6 +8,7 @@ const getModules = require('./modules');
 const getResolve = require('./resolve');
 const getTarget = require('./target');
 const getPerfomance = require('./perfomance');
+const getDevServer = require('./devServer');
 
 module.exports = {
 	getEntryPoints,
@@ -20,4 +21,5 @@ module.exports = {
 	getResolve,
 	getTarget,
 	getPerfomance,
+	getDevServer,
 };
diff --git a/packages/toolkit/config/webpack/plugins.js b/packages/toolkit/config/webpack/plugins.js
index 2d428b7c..896d4b12 100644
--- a/packages/toolkit/config/webpack/plugins.js
+++ b/packages/toolkit/config/webpack/plugins.js
@@ -7,6 +7,7 @@ const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const WebpackBar = require('webpackbar');
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanExtractedDeps = require('../../utils/clean-extracted-deps');
 
 const { hasStylelintConfig, fromConfigRoot } = require('../../utils');
@@ -18,10 +19,14 @@ const removeDistFolder = (file) => {
 module.exports = ({
 	isPackage,
 	isProduction,
-	projectConfig: { filenames, devURL, paths, wpDependencyExternals },
+	projectConfig: { devServer, filenames, devURL, paths, wpDependencyExternals },
 	packageConfig: { style },
 }) => {
 	return [
+		devServer &&
+			new HtmlWebpackPlugin({
+				template: 'pulic/index.html',
+			}),
 		new ESLintPlugin({
 			failOnError: false,
 			fix: false,
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
index a3c4361c..4746ffd8 100644
--- a/packages/toolkit/package.json
+++ b/packages/toolkit/package.json
@@ -96,7 +96,9 @@
     "webpack": "^5.24.2",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-sources": "^2.2.0",
-    "webpackbar": "^5.0.0-3"
+    "webpackbar": "^5.0.0-3",
+    "html-webpack-plugin": "^5.3.1",
+    "webpack-dev-server": "^3.11.2"
   },
   "description": "Collection of reusable scripts for 10up development.",
   "engines": {
diff --git a/packages/toolkit/scripts/start.js b/packages/toolkit/scripts/start.js
index 853f78d3..b6617c6a 100644
--- a/packages/toolkit/scripts/start.js
+++ b/packages/toolkit/scripts/start.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
 
 /**
  * Internal dependencies
@@ -37,17 +38,24 @@ const config = require(configPath);
 
 const compiler = webpack(config);
 
-compiler.watch(
-	{
-		aggregateTimeout: 600,
-	},
-	(err, stats) => {
-		displayWebpackStats(err, stats);
-
-		compiler.close((closedErr) => {
-			if (closedErr) {
-				console.error(closedErr);
-			}
-		});
-	},
-);
+if (config.devServer) {
+	const devServerOptions = { ...config.devServer, open: true };
+	const server = new WebpackDevServer(compiler, devServerOptions);
+
+	server.listen(devServerOptions.port, '127.0.0.1');
+} else {
+	compiler.watch(
+		{
+			aggregateTimeout: 600,
+		},
+		(err, stats) => {
+			displayWebpackStats(err, stats);
+
+			compiler.close((closedErr) => {
+				if (closedErr) {
+					console.error(closedErr);
+				}
+			});
+		},
+	);
+}
diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js
index 871c268b..de5ed023 100644
--- a/packages/toolkit/utils/config.js
+++ b/packages/toolkit/utils/config.js
@@ -102,12 +102,16 @@ const hasEslintignoreConfig = () => hasProjectFile('.eslintignore');
 
 const getDefaultConfig = () => {
 	const wpMode = getArgFromCLI('--wp');
+	const devServer = hasArgInCLI('--dev-server');
+	const devServerPort = getArgFromCLI('--port') || 8000;
 
 	return {
 		entry: require(fromConfigRoot('buildfiles.config.js')),
 		filenames: require(fromConfigRoot('filenames.config.js')),
 		paths: require(fromConfigRoot('paths.config.js')),
 		wordpress: wpMode !== 'false',
+		devServer,
+		devServerPort,
 		// true by default (if TENUP_NO_EXTERNALS is not set)
 		// if TENUP_NO_EXTERNALS is truthy then dependecyExternals is false
 		wpDependencyExternals:
diff --git a/projects/library/package.json b/projects/library/package.json
index f89b2b7b..1647ffa0 100644
--- a/projects/library/package.json
+++ b/projects/library/package.json
@@ -9,6 +9,7 @@
   "style": "./dist/index.css",
   "scripts": {
     "watch": "concurrently \"npm run build:modern -- --watch\" \"npm run build:umd -- --watch\"",
+    "start": "10up-toolkit start -i=src/test.js --dev-server",
     "build": "npm run build:modern && npm run build:umd",
     "build:modern": "10up-toolkit build -f=commonjs --wp=false",
     "build:umd": "10up-toolkit build -f=umd -i=src/index.umd.js --name=TenUpAccordion --external=none"
diff --git a/projects/library/pulic/index.html b/projects/library/pulic/index.html
new file mode 100644
index 00000000..22410125
--- /dev/null
+++ b/projects/library/pulic/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Library Test</title>
+    <style>
+        .accordion {margin-bottom: 1em;}
+        .accordion .accordion {padding: 1em;}
+    </style>
+  </head>
+  <body>
+    <div class="accordion accordion--parent">
+        <button id="header1" class="accordion-header" type="button">Accordion Header 1</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Accordion Heading</h2>
+            <p>here the content of 1st tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+        <button class="accordion-header" type="button">Accordion Header 2</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Parent Accordion Heading</h2>
+            <p>here the content of 2nd tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+        <button class="accordion-header" type="button">Accordion Header with Nested Accordion</button>
+        <div class="accordion-content">
+            <div class="accordion">
+                <button id="header2" class="accordion-header" type="button">Nested Accordion Header</button>
+                <div class="accordion-content">
+                    <h2 class="accordion-label">Nested Accordion Heading</h2>
+                    <p>here the content of 1st tab <a href="#">link</a></p>
+                </div> <!-- //.accordion-content -->
+
+                <button class="accordion-header" type="button">Nested Accordion Header</button>
+                <div class="accordion-content">
+                    <h2 class="accordion-label">Nested Accordion Heading</h2>
+                    <p>here the content of 2nd tab <a href="#">link</a></p>
+                </div> <!-- //.accordion-content -->
+            </div> <!-- //.accordion -->
+        </div> <!-- //.accordion-content -->
+
+        <button class="accordion-header" type="button">Accordion Header</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Accordion Heading</h2>
+            <p>here the content of 4th tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+    </div> <!-- //.accordion -->
+
+    <div class="accordion">
+        <button id="header3" class="accordion-header" type="button">Accordion Header</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Accordion Heading</h2>
+            <p>here the content of 1st tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+        <button class="accordion-header" type="button">Accordion Header</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Accordion Heading</h2>
+            <p>here the content of 2nd tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+        <button class="accordion-header" type="button">Accordion Header</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Accordion Heading</h2>
+            <p>here the content of 3rd tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+        <button class="accordion-header" type="button">Accordion Header</button>
+        <div class="accordion-content">
+            <h2 class="accordion-label">Accordion Heading</h2>
+            <p>here the content of 4th tab <a href="#">link</a></p>
+        </div> <!-- //.accordion-content -->
+
+    </div> <!-- //.accordion -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/projects/library/src/test.js b/projects/library/src/test.js
new file mode 100644
index 00000000..ac405112
--- /dev/null
+++ b/projects/library/src/test.js
@@ -0,0 +1,3 @@
+import { Accordion } from './index';
+
+new Accordion('.accordion');