diff --git a/docs/embed.md b/docs/embed.md
index 9b190eda..b3b0b1a9 100644
--- a/docs/embed.md
+++ b/docs/embed.md
@@ -1,3 +1,8 @@
 You can embed the URL using an iframe in your website.
 
 Optionally append `?readonly` to make the editor read-only.
+
+You can specify which tabs are to be active at start, and their width. Tab names are `html`, `css`, `js`, `console`, and `output`. Once specifying a tab to be active, none of defaults tabs will be active. You may specify a tab to be just active with average/standard width by passing `1` or specify custom width with any larger number which be parsed as percentage of window width to take.
+
+For example:
+`<iframe src='/?html=30&js=1&console=10&output=30&css=1' width=100% height=500 frameborder='0'></iframe>`
diff --git a/iFrameTest.html b/iFrameTest.html
new file mode 100644
index 00000000..10200c31
--- /dev/null
+++ b/iFrameTest.html
@@ -0,0 +1,2 @@
+<!-- To test iframes go to localhost:4000/iFrameTest.html -->
+<iframe src='/?html=30&js=10&console=1&output=20&css=20' width=100% height=500 param='one' frameborder='0'></iframe>
diff --git a/src/store/iframe.js b/src/store/iframe.js
new file mode 100644
index 00000000..6bae755a
--- /dev/null
+++ b/src/store/iframe.js
@@ -0,0 +1,50 @@
+import store from '@/store/index.js'
+
+// lets you specify what tabs are to be opened on init, and what width they should be
+// 1 is just on of equal/standard width, and 50 is 50% width
+const pans = ['html', 'css', 'js', 'console', 'output']
+const nonembed = window.self === window.top
+const nulify = val => {
+  return nonembed ? null : val
+}
+const params = window.location.search.slice(1).split('&').map(x => x.split('='))
+const paramsO = params.reduce((a, x) => {
+  a[x[0]] = x[1]
+  return a
+}, {})
+
+const selected = pans.filter(x => Boolean(paramsO[x]))
+const visiblePans = nulify(selected.length ? selected : null)
+store.dispatch('showPans', visiblePans)
+const sorted = pans.map(x => paramsO[x]).filter(x => x)
+const sortedNames = pans.filter(x => paramsO[x])
+const sortLen = sorted.length
+const specified = sorted.filter(x => x > 1)
+const specLen = specified.length
+// width specified
+let mutedStyles
+if (specLen) {
+  const sum = specified.reduce((a, x) => a + Number(x), 0)
+  const average = parseFloat((100 - sum) / (sortLen - specLen))
+  let left = 0
+  mutedStyles = sorted.map(x => {
+    let width
+    if (x > 1) {
+      width = x
+    } else {
+      width = average
+    }
+    const res = { left: per(left) }
+    left += Number(width)
+    res.right = per(100 - left)
+    return res
+  }).reduce((a, x, i) => {
+    a[sortedNames[i]] = x
+    return a
+  }, {})
+}
+const initialStyles = mutedStyles || {}
+function per(x) {
+  return parseFloat(x) + '%'
+}
+export { visiblePans, paramsO, initialStyles }
diff --git a/src/store/index.js b/src/store/index.js
index 07c7241f..b47f3c98 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -149,6 +149,7 @@ const store = new Vuex.Store({
       commit('TOGGLE_PAN', payload)
     },
     showPans({ commit }, pans) {
+      if (pans == null) return
       commit('SHOW_PANS', pans)
     },
     async updateTransformer({ commit }, { type, transformer }) {
diff --git a/src/utils/create-pan.js b/src/utils/create-pan.js
index fc74fdad..768a0a2f 100644
--- a/src/utils/create-pan.js
+++ b/src/utils/create-pan.js
@@ -7,6 +7,7 @@ import createEditor from '@/utils/create-editor'
 import Event from '@/utils/event'
 import panPosition from '@/utils/pan-position'
 import { hasNextPan, getHumanlizedTransformerName, getEditorModeByTransfomer } from '@/utils'
+import { initialStyles } from '../store/iframe'
 
 export default ({ name, editor, components } = {}) => {
   return {
@@ -82,6 +83,9 @@ export default ({ name, editor, components } = {}) => {
           ...style
         }
       })
+      if (initialStyles[name]) {
+        this.style = initialStyles[name]
+      }
     },
     methods: {
       ...mapActions(['updateCode', 'updateTransformer', 'setActivePan', 'editorChanged']),