diff --git a/quarto/quarto-style.css b/quarto/quarto-style.css
index 77af5dfb..148888db 100644
--- a/quarto/quarto-style.css
+++ b/quarto/quarto-style.css
@@ -114,8 +114,8 @@ hr {
 
 /* Code Boxes */
 
-div.sourceCode,
-div.pyshiny-container {
+div.output-content,
+div.shinylive-wrapper {
   background-color: rgba(250, 250, 250, 0.65);
   border: 1px solid rgba(233, 236, 239, 0.65);
   border-radius: 0.5rem;
@@ -125,53 +125,51 @@ div.pyshiny-container {
   margin-bottom: 32px;
 }
 
-div.sourceCode {
+div.output-content {
   padding: 12px 14px;
 }
 
-pre.sourceCode {
+pre.output-content {
   font-size: 13px;
   line-height: 1.8;
 }
 
-/* PyShiny Container */
-
-div.pyshiny-container {
+div.shinylive-wrapper {
   margin: 1em 0;
   border-radius: 8px;
 }
 
-.App--container {
+.shinylive-container {
   background-color: #eeeff2;
   min-height: auto;
 }
 
-.App--container > div {
+.shinylive-container > div {
   border-radius: var(--panel-roundness);
   background-color: var(--colors-bg);
   box-shadow: none;
 }
 
-.App--container.editor-cell {
+.shinylive-container.editor-cell {
   padding: 0;
 }
 
-.App--container.editor-cell .Editor {
+.shinylive-container.editor-cell .shinylive-editor {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.App--container.editor-cell .OutputCell {
+.shinylive-container.editor-cell .shinylive-output-cell {
   border-top: 2px solid #eeeff2;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 
-.App--container.editor-cell .OutputCell .rendered_html {
+.shinylive-container.editor-cell .shinylive-output-cell .rendered-html {
   padding: 2px 12px 3px 12px;
 }
 
-.App--container.editor-cell .OutputCell pre.sourceCode {
+.shinylive-container.editor-cell .shinylive-output-cell pre.output-content {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background-color: #eeeff2;
@@ -179,16 +177,16 @@ div.pyshiny-container {
   color: #666;
 }
 
-.App--container.editor-cell .Editor--container {
+.shinylive-container.editor-cell .editor-container {
   padding: 12px 12px 4px 12px;
 }
 
-.App--container.viewer > div,
-.App--container.viewer iframe {
+.shinylive-container.viewer > div,
+.shinylive-container.viewer iframe {
   border-radius: var(--panel-roundness);
 }
 
-.Editor--container .cm-editor .cm-scroller {
+.editor-container .cm-editor .cm-scroller {
   font-size: 13px;
   line-height: 1.8;
 }
diff --git a/src/Components/App.css b/src/Components/App.css
index 7130bd3b..9f047fef 100644
--- a/src/Components/App.css
+++ b/src/Components/App.css
@@ -26,7 +26,7 @@
     6.2px 8.3px 11.7px -2.5px hsl(var(--shadow-color) / 0.36);
 }
 
-.App--container {
+.shinylive-container {
   --pad: 2px;
   height: 100%;
   width: 100%;
@@ -38,26 +38,26 @@
 }
 
 /* Settings for standalone app viewer (with no other components) */
-.App--container.viewer {
+.shinylive-container.viewer {
   --pad: 0;
 }
 
-.App--container > div {
+.shinylive-container > div {
   border-radius: var(--panel-roundness);
   background-color: var(--colors-bg);
   /* outline: 1px solid var(--colors-grey); */
 }
 
-.ExampleSelector {
+.shinylive-example-selector {
   grid-area: exampleselector;
 }
-.Editor {
+.shinylive-editor {
   grid-area: editor;
 }
-.Terminal {
+.shinylive-terminal {
   grid-area: terminal;
 }
-.Viewer {
+.shinylive-viewer {
   grid-area: viewer;
 }
 
diff --git a/src/Components/App.tsx b/src/Components/App.tsx
index 70fe0fe9..f74ddb89 100644
--- a/src/Components/App.tsx
+++ b/src/Components/App.tsx
@@ -264,7 +264,7 @@ export function App({
       <>
         <HeaderBar headerBarCallbacks={headerBarCallbacks}></HeaderBar>
         <ResizableGrid
-          className="App--container"
+          className="shinylive-container"
           areas={[
             ["exampleselector", "editor", "viewer"],
             ["exampleselector", "terminal", "viewer"],
@@ -306,7 +306,7 @@ export function App({
       <>
         <HeaderBar headerBarCallbacks={headerBarCallbacks}></HeaderBar>
         <ResizableGrid
-          className="App--container"
+          className="shinylive-container"
           areas={[
             ["editor", "viewer"],
             ["terminal", "viewer"],
@@ -341,7 +341,7 @@ export function App({
   } else if (appMode === "editor-terminal") {
     return (
       <ResizableGrid
-        className="App--container"
+        className="shinylive-container"
         areas={[["editor", "terminal"]]}
         rowSizes={["1fr"]}
         colSizes={["1fr", "1fr"]}
@@ -366,7 +366,7 @@ export function App({
     );
   } else if (appMode === "editor-cell") {
     return (
-      <div className="App--container editor-cell">
+      <div className="shinylive-container editor-cell">
         <React.Suspense fallback={<div>Loading...</div>}>
           <Editor
             currentFilesFromApp={currentFiles}
@@ -405,7 +405,7 @@ export function App({
           };
 
     return (
-      <ResizableGrid className="App--container editor-viewer" {...gridDef}>
+      <ResizableGrid className="shinylive-container editor-viewer" {...gridDef}>
         <React.Suspense fallback={<div>Loading...</div>}>
           <Editor
             currentFilesFromApp={currentFiles}
@@ -430,7 +430,7 @@ export function App({
           <HeaderBar headerBarCallbacks={headerBarCallbacks}></HeaderBar>
         ) : null}
         <div
-          className="App--container viewer"
+          className="shinylive-container viewer"
           style={{
             height: appOptions.viewerHeight
               ? `${appOptions.viewerHeight}px`
diff --git a/src/Components/Editor.css b/src/Components/Editor.css
index 4933b90b..74e79574 100644
--- a/src/Components/Editor.css
+++ b/src/Components/Editor.css
@@ -1,4 +1,4 @@
-.Editor {
+.shinylive-editor {
   --bg-light-shade-color: #f6f6f6;
   --button-gray-color: #999;
   --button-hover-color: #hsl(207, 69%, 25%);
@@ -16,23 +16,23 @@
 
 /* Enforce a max height for the editor-viewer mode unless the user has dragged
 the size bigger.  */
-.ResizableGrid.editor-viewer:not(.been-dragged) > .Editor {
+.ResizableGrid.editor-viewer:not(.been-dragged) > .shinylive-editor {
   max-height: 800px;
 }
 
-.Editor--header {
+.editor-header {
   grid-area: header;
 }
-.Editor--container {
+.editor-container {
   grid-area: editor;
 }
 
-.Editor > div {
+.shinylive-editor > div {
   min-width: 0;
   min-height: 0;
 }
 
-.Editor--header {
+.editor-header {
   display: flex;
   padding-top: var(--pad);
   padding-left: var(--pad);
@@ -42,7 +42,7 @@ the size bigger.  */
   border-bottom: 1px solid var(--border-color);
 }
 
-.Editor--header--files > button {
+.editor-files > button {
   font-size: 14px;
   font-family: var(--font-face);
   height: 26px;
@@ -57,17 +57,17 @@ the size bigger.  */
   padding: 0 2px;
 }
 
-.Editor--header--files button svg {
+.editor-files button svg {
   /* When Bootstrap is used, it sets vertical-align:middle for svg, but that
    * messes up alignment of our svg icons. */
   vertical-align: unset;
 }
 
-.Editor--header--files--filename {
+.editor-filename {
   padding: 0 4px;
 }
 
-.Editor--header--files > button.selected {
+.editor-files > button.selected {
   color: black;
   background-color: var(--colors-bg);
   border-color: var(--border-color);
@@ -75,7 +75,7 @@ the size bigger.  */
   cursor: text;
 }
 
-.Editor--header--files > button.selected::after {
+.editor-files > button.selected::after {
   content: "";
   width: 100%;
   height: 4px;
@@ -86,7 +86,7 @@ the size bigger.  */
   border-bottom-color: var(--colors-bg);
 }
 
-.Editor--header--files > button.selected > input {
+.editor-files > button.selected > input {
   width: 100%;
   font-size: 14px;
   font-family: var(--font-face);
@@ -100,27 +100,24 @@ the size bigger.  */
   background-color: transparent;
 }
 
-.Editor--header--files > button.selected > input.invalid-filename {
+.editor-files > button.selected > input.invalid-filename {
   color: var(--colors-red);
 }
 
-.Editor--header--files > button > .Editor--header--files--closebutton {
+.editor-files > button > .editor-closebutton {
   width: 1.2rem;
   display: inline-block;
   color: var(--button-gray-color);
   font-weight: bold;
 }
 
-.Editor--header--files
-  > button.selected
-  > .Editor--header--files--closebutton
-  + input {
+.editor-files > button.selected > .editor-closebutton + input {
   /* If there's a close button, make the input a bit smaller so it doesn't
   overlap the close button. */
   width: calc(100% - 21px);
 }
 
-.Editor--header--files > .Editor--header--files--addtab {
+.editor-files > .editor-addtab {
   /* Make the border invisible, but keep the inherited thickness. This is to
   keep things aligned properly. */
   border-color: rgba(0, 0, 0, 0);
@@ -130,8 +127,8 @@ the size bigger.  */
   padding: 0;
 }
 
-.Editor--header--files .Editor--header--files--addbutton,
-.Editor--header--files .Editor--header--files--uploadbutton {
+.editor-files .editor-addbutton,
+.editor-files .editor-uploadbutton {
   display: inline-block;
   color: var(--button-gray-color);
   fill: var(--button-gray-color);
@@ -141,39 +138,39 @@ the size bigger.  */
   padding: 0 0.3rem;
 }
 
-.Editor--header--files .Editor--header--files--uploadbutton {
+.editor-files .editor-uploadbutton {
   font-size: 0.7rem;
 }
 
-.Editor--header--files .Editor--header--files--closebutton:hover,
-.Editor--header--files .Editor--header--files--addbutton:hover,
-.Editor--header--files .Editor--header--files--uploadbutton:hover {
+.editor-files .editor-closebutton:hover,
+.editor-files .editor-addbutton:hover,
+.editor-files .editor-uploadbutton:hover {
   color: var(--button-hover-color);
   fill: var(--button-hover-color);
   /* border-radius: 3px; */
   cursor: pointer;
 }
 
-.Editor--container {
+.editor-container {
   padding: var(--pad);
   position: relative;
 }
 
-.Editor--container .cm-editor {
+.editor-container .cm-editor {
   height: 100%;
 }
 
-.Editor--container .cm-editor.cm-focused {
+.editor-container .cm-editor.cm-focused {
   /* Don't show outline on focused editor. (Override CodeMirror default) */
   outline: none;
 }
 
-.Editor--container .cm-editor .cm-scroller {
+.editor-container .cm-editor .cm-scroller {
   font-family: var(--font-mono-face);
   font-size: var(--font-mono-size);
 }
 
-.Editor--container .cm-gutters {
+.editor-container .cm-gutters {
   color: #aaa;
   background-color: var(--colors-bg);
   border-right: 1px solid #eee;
@@ -181,16 +178,16 @@ the size bigger.  */
   padding-right: 4px;
 }
 
-.Editor--container .cm-activeLineGutter {
+.editor-container .cm-activeLineGutter {
   background-color: var(--colors-bg);
 }
 
-.Editor--container .cm-tooltip {
+.editor-container .cm-tooltip {
   font-family: var(--font-face);
   font-size: var(--font-size);
 }
 
-.Editor--container .cm-tooltip code {
+.editor-container .cm-tooltip code {
   font-family: var(--font-mono-face);
   font-size: var(--font-mono-size);
   /* If used with Bootstrap, we need to override Bootstrap's wrapping behavior
@@ -198,34 +195,34 @@ the size bigger.  */
   white-space: pre-wrap;
 }
 
-.Editor--container .cm-diagnostic {
+.editor-container .cm-diagnostic {
   font-family: var(--font-mono-face);
   font-size: var(--font-mono-size);
 }
 
-.Editor--container .cm-signature-signature {
+.editor-container .cm-signature-signature {
   font-family: var(--font-mono-face);
 }
 
 /* The tooltip shown when hovering, with the formatted docstring. */
-.Editor--container .docstring {
+.editor-container .docstring {
   padding: 3px 6px;
   max-width: 650px;
   max-height: 300px;
   overflow-y: auto;
 }
 
-.Editor--container .docstring pre {
+.editor-container .docstring pre {
   white-space: pre-wrap;
 }
 
-.Editor--container .docstring h2 {
+.editor-container .docstring h2 {
   font-size: 1.2em;
   font-weight: 600;
 }
 
 /* Code run button styles */
-.Editor button.code-run-button {
+.shinylive-editor button.code-run-button {
   border: none;
   font-size: 0.8rem;
   padding: 0.2rem 0.5rem;
@@ -233,19 +230,19 @@ the size bigger.  */
   white-space: nowrap;
 }
 
-.Editor .code-run-button:hover {
+.shinylive-editor .code-run-button:hover {
   color: var(--button-hover-color);
   fill: var(--button-hover-color);
 }
 
 /* When in the header of the app next to file tabs */
-.Editor--header .code-run-button {
+.editor-header .code-run-button {
   align-self: center;
   color: var(--button-gray-color);
   fill: var(--button-gray-color);
 }
 
-.Editor .floating-buttons .code-run-button {
+.shinylive-editor .floating-buttons .code-run-button {
   position: absolute;
   top: 0;
   right: 0;
@@ -255,13 +252,13 @@ the size bigger.  */
   opacity: 0;
 }
 
-.Editor:hover .floating-buttons .code-run-button {
+.shinylive-editor:hover .floating-buttons .code-run-button {
   color: var(--button-gray-color);
   fill: var(--button-gray-color);
   opacity: 1;
 }
 
-.Editor .floating-buttons .code-run-button:hover {
+.shinylive-editor .floating-buttons .code-run-button:hover {
   color: var(--button-hover-color);
   fill: var(--button-hover-color);
 }
diff --git a/src/Components/Editor.tsx b/src/Components/Editor.tsx
index 4d69fbea..55347cfd 100644
--- a/src/Components/Editor.tsx
+++ b/src/Components/Editor.tsx
@@ -518,18 +518,18 @@ export default function Editor({
   // ===========================================================================
 
   return (
-    <div className="Editor">
+    <div className="shinylive-editor">
       {shareModal}
       {showHeaderBar ? (
-        <div className="Editor--header">
+        <div className="editor-header">
           {showFileTabs ? <FileTabs {...tabbedFiles} /> : null}
-          <div className="Editor--header--actions">
+          <div className="editor-actions">
             {formatCodeButton}
             {runButton}
           </div>
         </div>
       ) : null}
-      <div className="Editor--container" ref={cmDivRef}></div>
+      <div className="editor-container" ref={cmDivRef}></div>
       {floatingButtons ? (
         <div className="floating-buttons">{runButton}</div>
       ) : null}
diff --git a/src/Components/ExampleSelector.css b/src/Components/ExampleSelector.css
index 41eb2173..e5f1845c 100644
--- a/src/Components/ExampleSelector.css
+++ b/src/Components/ExampleSelector.css
@@ -1,4 +1,4 @@
-.ExampleSelector {
+.shinylive-example-selector {
   padding: 3px 3px 3px 8px;
   font-family: var(--font-face);
   /* Each level of hierarchy will indent by a set amount (via padding) */
@@ -6,18 +6,18 @@
   --divider-color: #f1f1f1;
 }
 
-.ExampleSelector > .categories {
+.shinylive-example-selector > .categories {
   height: 100%;
   overflow-y: auto;
   padding: var(--indent);
 }
 
-.ExampleSelector > .categories .category-title {
+.shinylive-example-selector > .categories .category-title {
   color: var(--colors-blue, blue);
   margin-top: calc(var(--indent) * 2);
 }
 
-.ExampleSelector .example {
+.shinylive-example-selector .example {
   --v-pad: calc(var(--indent));
   --h-pad: calc(var(--indent) * 2);
   /* margin: 0.5rem 0; */
@@ -32,29 +32,29 @@
 }
 
 /* Undo the default link styles */
-.ExampleSelector .example > a {
+.shinylive-example-selector .example > a {
   text-decoration: unset;
   color: unset;
   cursor: unset;
 }
 
-.ExampleSelector .example:hover:not(.selected) {
+.shinylive-example-selector .example:hover:not(.selected) {
   cursor: pointer;
 }
 
 /* Selection is indicated by a thicker sidebar. Bar grows when hovered to indicate that clicking will select */
-.ExampleSelector .example.selected,
-.ExampleSelector .example:hover {
+.shinylive-example-selector .example.selected,
+.shinylive-example-selector .example:hover {
   --sidebar-w: 4px;
 }
 
 /* The selected example's sidebar is blue */
-.ExampleSelector .example.selected {
+.shinylive-example-selector .example.selected {
   --sidebar-color: var(--colors-blue, blue);
 }
 
 /* The sidebar is defined by a before psuedoelement */
-.ExampleSelector .example:before {
+.shinylive-example-selector .example:before {
   content: "";
   position: absolute;
   height: 70%;
@@ -65,18 +65,18 @@
   background-color: var(--sidebar-color);
 }
 
-.ExampleSelector .example .title {
+.shinylive-example-selector .example .title {
   font-weight: 500;
 }
 
-.ExampleSelector .example .about {
+.shinylive-example-selector .example .about {
   color: var(--colors-grey, grey);
   font-size: small;
   font-style: italic;
   font-weight: 400;
 }
 
-.ExampleSelector > .categories > section > .divider {
+.shinylive-example-selector > .categories > section > .divider {
   width: 100%;
   height: 1px;
   background-color: var(--divider-color);
diff --git a/src/Components/ExampleSelector.tsx b/src/Components/ExampleSelector.tsx
index eeb14858..879dc080 100644
--- a/src/Components/ExampleSelector.tsx
+++ b/src/Components/ExampleSelector.tsx
@@ -127,7 +127,7 @@ export function ExampleSelector({
   }
 
   return (
-    <div className="ExampleSelector">
+    <div className="shinylive-example-selector">
       <div className="categories">
         <h2>Examples</h2>
         {exampleCategories?.map(({ category, apps }, categoryIndex) => (
diff --git a/src/Components/OutputCell.css b/src/Components/OutputCell.css
index fb87ebf2..7742014c 100644
--- a/src/Components/OutputCell.css
+++ b/src/Components/OutputCell.css
@@ -1,4 +1,4 @@
-div.rendered_html table {
+.shinylive-output-cell div.rendered-html table {
   border: none;
   border-collapse: collapse;
   border-spacing: 0;
@@ -7,14 +7,14 @@ div.rendered_html table {
   table-layout: fixed;
 }
 
-div.rendered_html thead {
+.shinylive-output-cell div.rendered-html thead {
   border-bottom: 1px solid black;
   vertical-align: bottom;
 }
 
-div.rendered_html tr,
-div.rendered_html th,
-div.rendered_html td {
+.shinylive-output-cell div.rendered-html tr,
+.shinylive-output-cell div.rendered-html th,
+.shinylive-output-cell div.rendered-html td {
   text-align: right;
   vertical-align: middle;
   padding: 0.5em 0.5em;
@@ -24,14 +24,14 @@ div.rendered_html td {
   border: none;
 }
 
-div.rendered_html th {
+.shinylive-output-cell div.rendered-html th {
   font-weight: bold;
 }
 
-div.rendered_html tbody tr:nth-child(odd) {
+.shinylive-output-cell div.rendered-html tbody tr:nth-child(odd) {
   background: #f5f5f5;
 }
 
-div.rendered_html tbody tr:hover {
+.shinylive-output-cell div.rendered-html tbody tr:hover {
   background: rgba(66, 165, 245, 0.2);
 }
diff --git a/src/Components/OutputCell.tsx b/src/Components/OutputCell.tsx
index c7457d91..4738a0fe 100644
--- a/src/Components/OutputCell.tsx
+++ b/src/Components/OutputCell.tsx
@@ -1,9 +1,8 @@
-import * as React from "react";
-
 import { PyodideProxyHandle } from "../hooks/usePyodide";
 import { ToHtmlResult } from "../pyodide-proxy";
 import "./OutputCell.css";
 import { TerminalMethods } from "./Terminal";
+import * as React from "react";
 
 // =============================================================================
 // OutputCell component
@@ -43,15 +42,15 @@ export function OutputCell({
   }, [setTerminalMethods, pyodideProxyHandle]);
 
   return (
-    <div className="OutputCell">
+    <div className="shinylive-output-cell">
       {content.type === "html" ? (
         <div
-          className="rendered_html"
+          className="rendered-html"
           dangerouslySetInnerHTML={{ __html: content.value }}
         ></div>
       ) : (
-        <pre className="sourceCode">
-          <code className="sourceCode">{content.value}</code>
+        <pre className="output-content">
+          <code className="output-content">{content.value}</code>
         </pre>
       )}
     </div>
diff --git a/src/Components/Terminal.css b/src/Components/Terminal.css
index 04ea5666..9deb0d92 100644
--- a/src/Components/Terminal.css
+++ b/src/Components/Terminal.css
@@ -1,7 +1,7 @@
 /*
 This very-specific selector is needed to override some settings from App.css.
 */
-.Terminal.terminal {
+.shinylive-terminal.terminal {
   height: 100%;
   position: relative;
   overflow: hidden;
diff --git a/src/Components/Terminal.tsx b/src/Components/Terminal.tsx
index 8cc778cc..159c1644 100644
--- a/src/Components/Terminal.tsx
+++ b/src/Components/Terminal.tsx
@@ -158,5 +158,5 @@ export function Terminal({
     jqTermRef.current.set_prompt(">>> ");
   }, [pyodideProxyHandle.ready]);
 
-  return <div ref={containerRef} className="Terminal"></div>;
+  return <div ref={containerRef} className="shinylive-terminal"></div>;
 }
diff --git a/src/Components/Viewer.css b/src/Components/Viewer.css
index fda6d770..6b613ad0 100644
--- a/src/Components/Viewer.css
+++ b/src/Components/Viewer.css
@@ -1,27 +1,22 @@
-.Viewer {
+.shinylive-viewer {
   height: 100%;
   width: 100%;
   position: relative;
 }
 
-.Viewer--contents {
-  height: 100%;
-  width: 100%;
-}
-
 .app-frame {
   border-radius: var(--panel-roundness);
   border: 0;
 }
 
-.Viewer iframe {
+.shinylive-viewer iframe {
   background-color: white;
   width: 100%;
   height: 100%;
   display: block;
 }
 
-.Viewer .loading-wrapper {
+.shinylive-viewer .loading-wrapper {
   overflow: auto;
   background-color: white;
   position: absolute;
@@ -34,11 +29,11 @@
   align-items: center;
 }
 
-.Viewer .loading-wrapper.loading-wrapper-error {
+.shinylive-viewer .loading-wrapper.loading-wrapper-error {
   justify-content: left;
 }
 
-.Viewer .loading-wrapper .error-alert {
+.shinylive-viewer .loading-wrapper .error-alert {
   text-align: center;
   font-size: 1.4rem;
   font-family: var(--font-face);
@@ -46,14 +41,14 @@
   animation: loading-animation-fade-in 0.5s;
 }
 
-.Viewer .loading-wrapper .error-alert .error-icon {
+.shinylive-viewer .loading-wrapper .error-alert .error-icon {
   display: inline-block;
   text-align: center;
   width: 85px;
   margin-bottom: 0.5rem;
 }
 
-.Viewer .loading-wrapper .error-alert .error-log {
+.shinylive-viewer .loading-wrapper .error-alert .error-log {
   font-size: 0.7rem;
   text-align: left;
   padding: 0.3rem;
diff --git a/src/Components/Viewer.tsx b/src/Components/Viewer.tsx
index a549dff7..c1034252 100644
--- a/src/Components/Viewer.tsx
+++ b/src/Components/Viewer.tsx
@@ -191,7 +191,7 @@ export function Viewer({
   }, [pyodideProxyHandle.shinyReady]);
 
   return (
-    <div className="Viewer">
+    <div className="shinylive-viewer">
       <iframe ref={viewerFrameRef} className="app-frame" />
       {appRunningState === "loading" ? (
         <div className="loading-wrapper">
diff --git a/src/Components/codeMirror/FileTabs.tsx b/src/Components/codeMirror/FileTabs.tsx
index ed654732..719dc1e7 100644
--- a/src/Components/codeMirror/FileTabs.tsx
+++ b/src/Components/codeMirror/FileTabs.tsx
@@ -23,7 +23,7 @@ export function FileTabs({
 
   return (
     <>
-      <div className="Editor--header--files">
+      <div className="editor-files">
         {files.map((f, index) => {
           const isActiveFile = activeFile.name === f.name;
 
@@ -49,13 +49,13 @@ export function FileTabs({
                 setFocusOnEditor(true);
               }}
             >
-              <span className="Editor--header--files--filename">
+              <span className="editor-filename">
                 {editingCurrentFilename ? editingFilename : f.name}
               </span>
 
               {moreThanOneFile ? (
                 <span
-                  className="Editor--header--files--closebutton"
+                  className="editor-closebutton"
                   aria-label="Close file"
                   onClick={(e) => {
                     if (!confirm("Close " + f.name + "?")) {
@@ -110,9 +110,9 @@ export function FileTabs({
           );
         })}
 
-        <span className="Editor--header--files--addtab">
+        <span className="editor-addtab">
           <button
-            className="Editor--header--files--addbutton"
+            className="editor-addbutton"
             aria-label="Add a file"
             data-balloon-pos="down"
             onClick={() => addFile()}
@@ -120,7 +120,7 @@ export function FileTabs({
             +
           </button>
           <button
-            className="Editor--header--files--uploadbutton"
+            className="editor-uploadbutton"
             aria-label="Load a file from disk"
             data-balloon-pos="down"
             onClick={() => uploadFile()}
diff --git a/src/run-python-blocks.ts b/src/run-python-blocks.ts
index 7b8744e3..73c69d08 100644
--- a/src/run-python-blocks.ts
+++ b/src/run-python-blocks.ts
@@ -15,7 +15,7 @@ const blocks: NodeListOf<HTMLPreElement> =
 
 blocks.forEach((block) => {
   const container = document.createElement("div");
-  container.className = "pyshiny-container";
+  container.className = "shinylive-wrapper";
 
   // Copy over explicitly-set style properties.
   container.style.cssText = block.style.cssText;