We had a member ask us if there was a way to create an Editable Embed where all three panels (HTML, CSS, and JS) were visible at the same time for editing.

That’s not a default option. Panels in embed are normally tabs, which you would look at one at a time. But, since Editable Embeds are a PRO feature, you also have the PRO feature of Custom CSS for embeds, meaning you have the styling control to make this happen.

I tossed together a little CSS to demo how it might be done. Here’s an example:

See the Pen Hoving States by Chris Coyier (@chriscoyier) on CodePen.

All I did was write some CSS that forcibly overrides some of the default styling, doing a little different layout styling with flexbox.

#output {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column;

#html-box, #css-box {
  border-bottom: 10px solid white;

#html-box, #css-box, #js-box, #result-box {
  display: block !important;
  height: 33% !important;
  width: 50% !important;

#embed-nav {
  display: none;

#result-box {
  border-left: 10px solid white;
  height: 100% !important;

Then I linked to that CSS from the Embed Theme Builder as I was building the theme.

That handles the layout. To make it editable, you just click on the Make code editable checkbox in the “Embed This Pen” popup that comes up when embedding a particular Pen.

Now I can use this theme anytime I want this type of embed!