diff --git a/docs/builds/guides/development/custom-builds.md b/docs/builds/guides/development/custom-builds.md
index 26cb24de53f..1ee26e9d1e4 100644
--- a/docs/builds/guides/development/custom-builds.md
+++ b/docs/builds/guides/development/custom-builds.md
@@ -163,6 +163,16 @@ yarn run build
 
 You can validate whether your new build works by opening the `sample/index.html` file in a browser (via HTTP, not as a local file). Make sure to **clear the cache**.
 
+#### Starting the local development server
+
+To make development easier, you may optionally start a local development server by executing the following command:
+
+```bash
+yarn run start
+```
+
+This will start `webpack-dev-server` with source watching and live reloading (available at `http://localhost:8080/` by default).
+
 ## Updating the build
 
 You may decide to update your build at any time. Since it is a fork of the official build, you can simply merge the changes that happened meanwhile in that build, using Git commands:
diff --git a/packages/ckeditor5-build-balloon-block/package.json b/packages/ckeditor5-build-balloon-block/package.json
index b375c0c922b..f4b6b6a6d4a 100644
--- a/packages/ckeditor5-build-balloon-block/package.json
+++ b/packages/ckeditor5-build-balloon-block/package.json
@@ -57,7 +57,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -73,6 +74,7 @@
     "directory": "packages/ckeditor5-build-balloon-block"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }
diff --git a/packages/ckeditor5-build-balloon-block/sample/index.html b/packages/ckeditor5-build-balloon-block/sample/index.html
index 0122515dfcd..72b69c898f5 100644
--- a/packages/ckeditor5-build-balloon-block/sample/index.html
+++ b/packages/ckeditor5-build-balloon-block/sample/index.html
@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor">balloon block editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	BalloonEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {
diff --git a/packages/ckeditor5-build-balloon-block/webpack.config.js b/packages/ckeditor5-build-balloon-block/webpack.config.js
index 2ac3386b4a1..9f8dc911ff1 100644
--- a/packages/ckeditor5-build-balloon-block/webpack.config.js
+++ b/packages/ckeditor5-build-balloon-block/webpack.config.js
@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true
diff --git a/packages/ckeditor5-build-balloon/package.json b/packages/ckeditor5-build-balloon/package.json
index 04eea285bc3..6d7f73c4752 100644
--- a/packages/ckeditor5-build-balloon/package.json
+++ b/packages/ckeditor5-build-balloon/package.json
@@ -56,7 +56,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -72,6 +73,7 @@
     "directory": "packages/ckeditor5-build-balloon"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }
diff --git a/packages/ckeditor5-build-balloon/sample/index.html b/packages/ckeditor5-build-balloon/sample/index.html
index 34a4a67540b..bce32e2f8ce 100644
--- a/packages/ckeditor5-build-balloon/sample/index.html
+++ b/packages/ckeditor5-build-balloon/sample/index.html
@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor">balloon editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	BalloonEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {
diff --git a/packages/ckeditor5-build-balloon/webpack.config.js b/packages/ckeditor5-build-balloon/webpack.config.js
index 2ac3386b4a1..9f8dc911ff1 100644
--- a/packages/ckeditor5-build-balloon/webpack.config.js
+++ b/packages/ckeditor5-build-balloon/webpack.config.js
@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true
diff --git a/packages/ckeditor5-build-classic/package.json b/packages/ckeditor5-build-classic/package.json
index ed1a1a0be48..c2ed99c3c5a 100644
--- a/packages/ckeditor5-build-classic/package.json
+++ b/packages/ckeditor5-build-classic/package.json
@@ -56,7 +56,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -72,6 +73,7 @@
     "directory": "packages/ckeditor5-build-classic"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }
diff --git a/packages/ckeditor5-build-classic/sample/index.html b/packages/ckeditor5-build-classic/sample/index.html
index 5f4e2c46d16..45a8ee8e162 100644
--- a/packages/ckeditor5-build-classic/sample/index.html
+++ b/packages/ckeditor5-build-classic/sample/index.html
@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	ClassicEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {
diff --git a/packages/ckeditor5-build-classic/webpack.config.js b/packages/ckeditor5-build-classic/webpack.config.js
index a7843724cf6..7045a99727a 100644
--- a/packages/ckeditor5-build-classic/webpack.config.js
+++ b/packages/ckeditor5-build-classic/webpack.config.js
@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true
diff --git a/packages/ckeditor5-build-decoupled-document/package.json b/packages/ckeditor5-build-decoupled-document/package.json
index f2fd007882f..f742a75ecd1 100644
--- a/packages/ckeditor5-build-decoupled-document/package.json
+++ b/packages/ckeditor5-build-decoupled-document/package.json
@@ -58,7 +58,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -74,6 +75,7 @@
     "directory": "packages/ckeditor5-build-decoupled-document"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }
diff --git a/packages/ckeditor5-build-decoupled-document/sample/index.html b/packages/ckeditor5-build-decoupled-document/sample/index.html
index 888e0a960f8..f2523c72ec6 100644
--- a/packages/ckeditor5-build-decoupled-document/sample/index.html
+++ b/packages/ckeditor5-build-decoupled-document/sample/index.html
@@ -48,12 +48,12 @@ <h2>The editable</h2>
 	}
 </style>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	const editorData = `<h2>Sample</h2>
 		<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#document-editor">document editor build</a>.</p>
 		<figure class="image">
-			<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+			<img src="/manual/sample.jpg" alt="Autumn fields" />
 		</figure>
 		<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>`;
 
diff --git a/packages/ckeditor5-build-decoupled-document/webpack.config.js b/packages/ckeditor5-build-decoupled-document/webpack.config.js
index e8a55c5d3f1..fea9efd6013 100644
--- a/packages/ckeditor5-build-decoupled-document/webpack.config.js
+++ b/packages/ckeditor5-build-decoupled-document/webpack.config.js
@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true
diff --git a/packages/ckeditor5-build-inline/package.json b/packages/ckeditor5-build-inline/package.json
index 951e0b9e489..55fa0498b34 100644
--- a/packages/ckeditor5-build-inline/package.json
+++ b/packages/ckeditor5-build-inline/package.json
@@ -56,7 +56,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -72,6 +73,7 @@
     "directory": "packages/ckeditor5-build-inline"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }
diff --git a/packages/ckeditor5-build-inline/sample/index.html b/packages/ckeditor5-build-inline/sample/index.html
index b71aaf4efa5..4daf267e278 100644
--- a/packages/ckeditor5-build-inline/sample/index.html
+++ b/packages/ckeditor5-build-inline/sample/index.html
@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#inline-editor">inline editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	InlineEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {
diff --git a/packages/ckeditor5-build-inline/webpack.config.js b/packages/ckeditor5-build-inline/webpack.config.js
index a0a17df24c2..3d9b8e68d79 100644
--- a/packages/ckeditor5-build-inline/webpack.config.js
+++ b/packages/ckeditor5-build-inline/webpack.config.js
@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true