diff --git a/packages/components/src/CodeEditor.tsx b/packages/components/src/CodeEditor.tsx
index e7a85c86..d00d52d6 100644
--- a/packages/components/src/CodeEditor.tsx
+++ b/packages/components/src/CodeEditor.tsx
@@ -9,7 +9,8 @@ import "ace-builds/src-noconflict/keybinding-vim";
 interface CodeEditorProps {
    value : string,
    onChange : (value: string) => void,
-   oneLine : boolean
+   oneLine : boolean,
+   width: number
 }
 
 export let CodeEditor : FC<CodeEditorProps> = (props) =>
@@ -17,6 +18,7 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
       value={props.value}
       mode="golang"
       theme="github"
+      width={props.width + "px"}
       height={props.oneLine ? "1em" : "500px"}
       showGutter={false}
       highlightActiveLine={false}
diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
index 1f8ad517..e58f5fd7 100644
--- a/packages/components/src/SquiggleChart.tsx
+++ b/packages/components/src/SquiggleChart.tsx
@@ -40,6 +40,8 @@ export interface SquiggleChartProps {
   environment?: exportEnv;
   /** When the environment changes */
   onEnvChange?(env: exportEnv): void;
+  /** CSS width of the element */
+  width?: number;
 }
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
@@ -75,7 +77,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
           }));
 
           console.log(values.length)
-          return <SquiggleVegaChart data={{ con: values }} actions={false}/>;
+          return <SquiggleVegaChart width={props.width ? props.width : 500} data={{ con: values }} actions={false}/>;
         } else if (shape.tag === "Discrete") {
           let xyShape = shape.value.xyShape;
           let totalY = xyShape.ys.reduce((a, b) => a + b);
diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx
index 1fb0542b..75b245c7 100644
--- a/packages/components/src/SquiggleEditor.tsx
+++ b/packages/components/src/SquiggleEditor.tsx
@@ -23,6 +23,8 @@ export interface SquiggleEditorProps {
   environment?: exportEnv;
   /** when the environment changes. Used again for notebook magic*/
   onEnvChange?(env: exportEnv): void;
+  /** The width of the element */
+  width: number;
 }
 
 const highlight = (_: HTMLInputElement) => {};
@@ -47,6 +49,7 @@ export class SquiggleEditor extends React.Component<
     return (
       <div>
         <CodeEditor
+          width={props.width ? props.width : 500}
           value={expression}
           onChange={(e) => {
             this.setState({ expression: e });
@@ -54,6 +57,7 @@ export class SquiggleEditor extends React.Component<
           oneLine={true}
         />
         <SquiggleChart
+          width={props.width ? props.width : 500}
           squiggleString={expression}
           sampleCount={props.sampleCount}
           outputXYPoints={props.outputXYPoints}