diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..77d1a69
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,25 @@
+{
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": "> 0.25%, not dead",
+ "useBuiltIns": "usage",
+ "corejs": "3.18",
+ }
+ ]
+ ],
+ "exclude": [
+ "node_modules/**"
+ ],
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-syntax-jsx",
+ [
+ "@babel/plugin-transform-react-jsx",
+ {
+ "pragma": "MotorCortex.utils.createDOMElement"
+ }
+ ]
+ ]
+}
diff --git a/.browserlistrc b/.browserlistrc
new file mode 100644
index 0000000..5e9641b
--- /dev/null
+++ b/.browserlistrc
@@ -0,0 +1,6 @@
+{
+"browserslist": [
+ ">0.2%",
+ "not ie <= 11"
+ ]
+}
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..4187d67
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+bundle.js
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..30ff6ca
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,60 @@
+{
+ "parser": "@babel/eslint-parser",
+ "extends": [
+ "eslint:recommended",
+ "prettier"
+ ],
+ "plugins": [
+ "babel",
+ "prettier"
+ ],
+ "env": {
+ "browser": true,
+ "node": true
+ },
+ "globals": {
+ "document": false,
+ "escape": false,
+ "navigator": false,
+ "unescape": false,
+ "window": false,
+ "describe": true,
+ "before": true,
+ "it": true,
+ "expect": true,
+ "sinon": true
+ },
+ "rules": {
+ "prettier/prettier": [
+ "error"
+ ],
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "semi": [
+ "error",
+ "always"
+ ],
+ "no-console": [
+ "error",
+ {
+ "allow": [
+ "warn",
+ "error",
+ "info"
+ ]
+ }
+ ],
+ "prefer-promise-reject-errors": "error",
+ "prefer-const": [
+ "error",
+ {
+ "destructuring": "any",
+ "ignoreReadBeforeAssign": false
+ }
+ ],
+ "no-var": "error",
+ "no-unused-vars": "error"
+ }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..32662e2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,73 @@
+# Node modules
+node_modules
+demo/bundle.js
+demo/bundle.js.LICENSE.txt
+
+#Package JSON Lock
+package-lock.json
+
+# Coverage
+coverage
+
+# Output folders
+build
+compiled
+.nyc_output
+
+# Cachses
+.awcache
+.rpt2_cache
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# VSCode
+.vscode
+
+# Cloud9
+.c9revisions
+.c9
+
+# Intelij
+.idea
+cmake-build-*/
+
+# Sublime text
+*.iws
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+*.lnk
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+$RECYCLE.BIN/
+[Dd]esktop.ini
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..58be884
--- /dev/null
+++ b/README.md
@@ -0,0 +1,34 @@
+# motorcortex-clip-starter
+
+## Purpose
+
+This repository is a starter boilerplate for creating MotorCortex Clips with DCode. Do not use this repo directly. Instead, use it from the **[Donkeyclip CLI](https://github.com/donkeyclip/cli)**
+
+## Structure and Contents
+
+It includes:
+
+- a pre-configured webpack so you don't have to care about setting up your project
+- pre-configured eslint and babel
+- a "clip" folder in order for you to use to define your Clip and Incidents. The folder
+ contains the `clip.js` file which is just a starting point for your Clip.
+- a "demo" folder that is there just for the needs of viewing, debugging and creating
+ your Clip through DCode.
+
+## How to use
+
+Once you've created your new Clip you have the ability to publish it through the [donkeyclip](https://donkeyclip.com) page. You can then embed your clip in any site you want!.
+
+## Commands
+
+- `npm run build`: builds the demo
+- `npm start`: builds and starts the demo
+- `npm render`: render the demo to mp4 video see [@donkeyclip/video-renderer](https://github.com/donkeyclip/video-renderer) from more
+
+## Have fun!!!
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+[
](https://donkeyclip.com)
diff --git a/clip/clip.css b/clip/clip.css
new file mode 100644
index 0000000..3e7d147
--- /dev/null
+++ b/clip/clip.css
@@ -0,0 +1,12 @@
+* {
+ --color: {{ initParams.color }};
+}
+
+.container {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ height: 100%;
+ color: var(--color);
+}
diff --git a/clip/clip.html b/clip/clip.html
new file mode 100644
index 0000000..584204e
--- /dev/null
+++ b/clip/clip.html
@@ -0,0 +1 @@
+