diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
deleted file mode 100644
index 7b0b3e43..00000000
--- a/packages/components/src/SquiggleChart.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-import * as React from "react";
-import _ from "lodash";
-import type { Spec } from "vega";
-import { run } from "@quri/squiggle-lang";
-import type {
-  DistPlus,
-  SamplingInputs,
-  exportEnv,
-  exportDistribution,
-} from "@quri/squiggle-lang";
-import { createClassFromSpec } from "react-vega";
-import * as chartSpecification from "./spec-distributions.json";
-import * as percentilesSpec from "./spec-percentiles.json";
-import { NumberShower } from "./NumberShower";
-import styled from "styled-components";
-import { CONTINUOUS_TO_DISCRETE_SCALES } from "vega-lite/build/src/scale";
-
-let SquiggleVegaChart = createClassFromSpec({
-  spec: chartSpecification as Spec,
-});
-
-let SquigglePercentilesChart = createClassFromSpec({
-  spec: percentilesSpec as Spec,
-});
-
-export interface SquiggleChartProps {
-  /** The input string for squiggle */
-  squiggleString?: string;
-
-  /** If the output requires monte carlo sampling, the amount of samples */
-  sampleCount?: number;
-  /** The amount of points returned to draw the distribution */
-  outputXYPoints?: number;
-  kernelWidth?: number;
-  pointDistLength?: number;
-  /** If the result is a function, where the function starts */
-  diagramStart?: number;
-  /** If the result is a function, where the function ends */
-  diagramStop?: number;
-  /** If the result is a function, how many points along the function it samples */
-  diagramCount?: number;
-  /** variables declared before this expression */
-  environment?: exportEnv;
-  /** When the environment changes */
-  onEnvChange?(env: exportEnv): void;
-  /** CSS width of the element */
-  width?: number;
-  height?: number;
-}
-
-const Error = styled.div`
-  border: 1px solid #792e2e;
-  background: #eee2e2;
-  padding: 0.4em 0.8em;
-`;
-
-const ShowError: React.FC<{ heading: string; children: React.ReactNode }> = ({
-  heading = "Error",
-  children,
-}) => {
-  return (
-    <Error>
-      <h3>{heading}</h3>
-      {children}
-    </Error>
-  );
-};
-
-export const DistPlusChart: React.FC<{
-  distPlus: DistPlus;
-  width: number;
-  height: number;
-}> = ({ distPlus, width, height }) => {
-  let shape = distPlus.pointSetDist;
-  if (shape.tag === "Continuous") {
-    let xyShape = shape.value.xyShape;
-    let totalY = xyShape.ys.reduce((a, b) => a + b);
-    let total = 0;
-    let cdf = xyShape.ys.map((y) => {
-      total += y;
-      return total / totalY;
-    });
-    let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
-      cdf: (c * 100).toFixed(2) + "%",
-      x: x,
-      y: y,
-    }));
-
-    return (
-      <SquiggleVegaChart
-        width={width}
-        height={height}
-        data={{ con: values }}
-        actions={false}
-      />
-    );
-  } else if (shape.tag === "Discrete") {
-    let xyShape = shape.value.xyShape;
-    let totalY = xyShape.ys.reduce((a, b) => a + b);
-    let total = 0;
-    let cdf = xyShape.ys.map((y) => {
-      total += y;
-      return total / totalY;
-    });
-    let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
-      cdf: (c * 100).toFixed(2) + "%",
-      x: x,
-      y: y,
-    }));
-
-    return <SquiggleVegaChart data={{ dis: values }} actions={false} />;
-  } else if (shape.tag === "Mixed") {
-    let discreteShape = shape.value.discrete.xyShape;
-    let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
-
-    let discretePoints = _.zip(discreteShape.xs, discreteShape.ys);
-    let continuousShape = shape.value.continuous.xyShape;
-    let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
-
-    interface labeledPoint {
-      x: number;
-      y: number;
-      type: "discrete" | "continuous";
-    }
-
-    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "discrete",
-    }));
-    let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "continuous",
-    }));
-
-    let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
-
-    let totalContinuous = 1 - totalDiscrete;
-    let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
-
-    let total = 0;
-    let cdf = sortedPoints.map((point: labeledPoint) => {
-      if (point.type === "discrete") {
-        total += point.y;
-        return total;
-      } else if (point.type === "continuous") {
-        total += (point.y / totalY) * totalContinuous;
-        return total;
-      }
-    });
-
-    interface cdfLabeledPoint {
-      cdf: string;
-      x: number;
-      y: number;
-      type: "discrete" | "continuous";
-    }
-    let cdfLabeledPoint: cdfLabeledPoint[] = _.zipWith(
-      cdf,
-      sortedPoints,
-      (c: number, point: labeledPoint) => ({
-        ...point,
-        cdf: (c * 100).toFixed(2) + "%",
-      })
-    );
-    let continuousValues = cdfLabeledPoint.filter(
-      (x) => x.type === "continuous"
-    );
-    let discreteValues = cdfLabeledPoint.filter((x) => x.type === "discrete");
-
-    return (
-      <SquiggleVegaChart
-        data={{ con: continuousValues, dis: discreteValues }}
-        actions={false}
-      />
-    );
-  }
-};
-
-const _rangeByCount = (start, stop, count) => {
-  const step = (stop - start) / (count - 1);
-  const items = _.range(start, stop, step);
-  const result = items.concat([stop]);
-  return result;
-};
-
-type distPlusFn = (
-  a: number
-) => { tag: "Ok"; value: DistPlus } | { tag: "Error"; value: string };
-
-// This could really use a line in the location of the signal. I couldn't get it to work.
-// https://vega.github.io/vega/docs/signals/#handlers
-
-export const FunctionChart: React.FC<{
-  distPlusFn: distPlusFn;
-  diagramStart: number;
-  diagramStop: number;
-  diagramCount: number;
-}> = ({ distPlusFn, diagramStart, diagramStop, diagramCount }) => {
-  let [mouseOverlay, setMouseOverlay] = React.useState(NaN);
-  function handleHover(...args) {
-    setMouseOverlay(args[1]);
-  }
-  function handleOut(...args) {
-    setMouseOverlay(NaN);
-  }
-  const signalListeners = { mousemove: handleHover, mouseout: handleOut };
-  let percentileArray = [
-    0.01, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 0.99,
-  ];
-  let mouseItem = distPlusFn(mouseOverlay);
-  let showChart =
-    mouseItem.tag === "Ok" ? (
-      <DistPlusChart distPlus={mouseItem.value} width={400} height={140} />
-    ) : (
-      <></>
-    );
-  let data1 = _rangeByCount(diagramStart, diagramStop, diagramCount);
-  let valueData = data1
-    .map((x) => {
-      let result = distPlusFn(x);
-      if (result.tag === "Ok") {
-        return { x: x, value: result.value };
-      } else return null;
-    })
-    .filter((x) => x !== null)
-    .map(({ x, value }) => {
-      let percentiles = getPercentiles(percentileArray, value);
-      return {
-        x: x,
-        p1: percentiles[0],
-        p5: percentiles[1],
-        p10: percentiles[2],
-        p20: percentiles[3],
-        p30: percentiles[4],
-        p40: percentiles[5],
-        p50: percentiles[6],
-        p60: percentiles[7],
-        p70: percentiles[8],
-        p80: percentiles[9],
-        p90: percentiles[10],
-        p95: percentiles[11],
-        p99: percentiles[12],
-      };
-    });
-
-  let errorData = data1
-    .map((x) => {
-      let result = distPlusFn(x);
-      if (result.tag === "Error") {
-        return { x: x, error: result.value };
-      } else return null;
-    })
-    .filter((x) => x !== null);
-  let error2 = _.groupBy(errorData, (x) => x.error);
-  return (
-    <>
-      <SquigglePercentilesChart
-        data={{ facet: valueData }}
-        actions={false}
-        signalListeners={signalListeners}
-      />
-      {showChart}
-      {_.keysIn(error2).map((k) => (
-        <ShowError heading={k}>
-          {`Values: [${error2[k].map((r) => r.x.toFixed(2)).join(",")}]`}
-        </ShowError>
-      ))}
-    </>
-  );
-};
-
-export const SquiggleChart: React.FC<SquiggleChartProps> = ({
-  squiggleString = "",
-  sampleCount = 1000,
-  outputXYPoints = 1000,
-  kernelWidth,
-  pointDistLength = 1000,
-  diagramStart = 0,
-  diagramStop = 10,
-  diagramCount = 20,
-  environment = [],
-  onEnvChange = () => {},
-  width = 500,
-  height = 60,
-}: SquiggleChartProps) => {
-  let samplingInputs: SamplingInputs = {
-    sampleCount: sampleCount,
-    outputXYPoints: outputXYPoints,
-    kernelWidth: kernelWidth,
-    pointDistLength: pointDistLength,
-  };
-
-  let result = run(squiggleString, samplingInputs, environment);
-  if (result.tag === "Ok") {
-    let environment = result.value.environment;
-    let exports = result.value.exports;
-    onEnvChange(environment);
-    let chartResults = exports.map((chartResult: exportDistribution) => {
-      if (chartResult["NAME"] === "Float") {
-        return <NumberShower precision={3} number={chartResult["VAL"]} />;
-      } else if (chartResult["NAME"] === "DistPlus") {
-        return (
-          <DistPlusChart
-            distPlus={chartResult.VAL}
-            height={height}
-            width={width}
-          />
-        );
-      } else if (chartResult.NAME === "Function") {
-        return (
-          <FunctionChart
-            distPlusFn={chartResult.VAL}
-            diagramStart={diagramStart}
-            diagramStop={diagramStop}
-            diagramCount={diagramCount}
-          />
-        );
-      }
-    });
-    return <>{chartResults}</>;
-  } else if (result.tag === "Error") {
-    // At this point, we came across an error. What was our error?
-    return <ShowError heading={"Parse Error"}>{result.value}</ShowError>;
-  }
-};
-
-function getPercentiles(percentiles: number[], t: DistPlus) {
-  if (t.pointSetDist.tag === "Discrete") {
-    let total = 0;
-    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
-    let bounds = percentiles.map((_) => maxX);
-    _.zipWith(
-      t.pointSetDist.value.xyShape.xs,
-      t.pointSetDist.value.xyShape.ys,
-      (x, y) => {
-        total += y;
-        percentiles.forEach((v, i) => {
-          if (total > v && bounds[i] === maxX) {
-            bounds[i] = x;
-          }
-        });
-      }
-    );
-    return bounds;
-  } else if (t.pointSetDist.tag === "Continuous") {
-    let total = 0;
-    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
-    let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
-    let bounds = percentiles.map((_) => maxX);
-    _.zipWith(
-      t.pointSetDist.value.xyShape.xs,
-      t.pointSetDist.value.xyShape.ys,
-      (x, y) => {
-        total += y / totalY;
-        percentiles.forEach((v, i) => {
-          if (total > v && bounds[i] === maxX) {
-            bounds[i] = x;
-          }
-        });
-      }
-    );
-    return bounds;
-  } else if (t.pointSetDist.tag === "Mixed") {
-    let discreteShape = t.pointSetDist.value.discrete.xyShape;
-    let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
-
-    let discretePoints = _.zip(discreteShape.xs, discreteShape.ys);
-    let continuousShape = t.pointSetDist.value.continuous.xyShape;
-    let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
-
-    interface labeledPoint {
-      x: number;
-      y: number;
-      type: "discrete" | "continuous";
-    }
-
-    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "discrete",
-    }));
-    let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "continuous",
-    }));
-
-    let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
-
-    let totalContinuous = 1 - totalDiscrete;
-    let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
-
-    let total = 0;
-    let maxX = _.max(sortedPoints.map((x) => x.x));
-    let bounds = percentiles.map((_) => maxX);
-    sortedPoints.map((point: labeledPoint) => {
-      if (point.type === "discrete") {
-        total += point.y;
-      } else if (point.type === "continuous") {
-        total += (point.y / totalY) * totalContinuous;
-      }
-      percentiles.forEach((v, i) => {
-        if (total > v && bounds[i] === maxX) {
-          bounds[i] = total;
-        }
-      });
-      return total;
-    });
-    return bounds;
-  }
-}
diff --git a/packages/components/src/CodeEditor.tsx b/packages/components/src/components/CodeEditor.tsx
similarity index 100%
rename from packages/components/src/CodeEditor.tsx
rename to packages/components/src/components/CodeEditor.tsx
diff --git a/packages/components/src/components/DistPlusChart.tsx b/packages/components/src/components/DistPlusChart.tsx
new file mode 100644
index 00000000..02f2fabd
--- /dev/null
+++ b/packages/components/src/components/DistPlusChart.tsx
@@ -0,0 +1,124 @@
+import * as React from "react";
+import _ from "lodash";
+import type { Spec } from "vega";
+import type {
+  DistPlus,
+} from "@quri/squiggle-lang";
+import { createClassFromSpec } from "react-vega";
+import * as chartSpecification from "../vega-specs/spec-distributions.json";
+
+let SquiggleVegaChart = createClassFromSpec({
+  spec: chartSpecification as Spec,
+});
+
+export const DistPlusChart: React.FC<{
+  distPlus: DistPlus;
+  width: number;
+  height: number;
+}> = ({ distPlus, width, height }) => {
+  let shape = distPlus.pointSetDist;
+  if (shape.tag === "Continuous") {
+    let xyShape = shape.value.xyShape;
+    let totalY = xyShape.ys.reduce((a, b) => a + b);
+    let total = 0;
+    let cdf = xyShape.ys.map((y) => {
+      total += y;
+      return total / totalY;
+    });
+    let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
+      cdf: (c * 100).toFixed(2) + "%",
+      x: x,
+      y: y,
+    }));
+
+    return (
+      <SquiggleVegaChart
+        width={width}
+        height={height}
+        data={{ con: values }}
+        actions={false}
+      />
+    );
+  } else if (shape.tag === "Discrete") {
+    let xyShape = shape.value.xyShape;
+    let totalY = xyShape.ys.reduce((a, b) => a + b);
+    let total = 0;
+    let cdf = xyShape.ys.map((y) => {
+      total += y;
+      return total / totalY;
+    });
+    let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
+      cdf: (c * 100).toFixed(2) + "%",
+      x: x,
+      y: y,
+    }));
+
+    return <SquiggleVegaChart data={{ dis: values }} actions={false} />;
+  } else if (shape.tag === "Mixed") {
+    let discreteShape = shape.value.discrete.xyShape;
+    let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
+
+    let discretePoints = _.zip(discreteShape.xs, discreteShape.ys);
+    let continuousShape = shape.value.continuous.xyShape;
+    let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
+
+    interface labeledPoint {
+      x: number;
+      y: number;
+      type: "discrete" | "continuous";
+    }
+
+    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
+      x: x,
+      y: y,
+      type: "discrete",
+    }));
+    let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
+      x: x,
+      y: y,
+      type: "continuous",
+    }));
+
+    let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
+
+    let totalContinuous = 1 - totalDiscrete;
+    let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
+
+    let total = 0;
+    let cdf = sortedPoints.map((point: labeledPoint) => {
+      if (point.type === "discrete") {
+        total += point.y;
+        return total;
+      } else if (point.type === "continuous") {
+        total += (point.y / totalY) * totalContinuous;
+        return total;
+      }
+    });
+
+    interface cdfLabeledPoint {
+      cdf: string;
+      x: number;
+      y: number;
+      type: "discrete" | "continuous";
+    }
+    let cdfLabeledPoint: cdfLabeledPoint[] = _.zipWith(
+      cdf,
+      sortedPoints,
+      (c: number, point: labeledPoint) => ({
+        ...point,
+        cdf: (c * 100).toFixed(2) + "%",
+      })
+    );
+    let continuousValues = cdfLabeledPoint.filter(
+      (x) => x.type === "continuous"
+    );
+    let discreteValues = cdfLabeledPoint.filter((x) => x.type === "discrete");
+
+    return (
+      <SquiggleVegaChart
+        data={{ con: continuousValues, dis: discreteValues }}
+        actions={false}
+      />
+    );
+  }
+};
\ No newline at end of file
diff --git a/packages/components/src/components/Error.tsx b/packages/components/src/components/Error.tsx
new file mode 100644
index 00000000..4f5236ae
--- /dev/null
+++ b/packages/components/src/components/Error.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import styled from "styled-components";
+
+const ShowError = styled.div`
+  border: 1px solid #792e2e;
+  background: #eee2e2;
+  padding: 0.4em 0.8em;
+`;
+
+export const Error: React.FC<{ heading: string; children: React.ReactNode }> = ({
+  heading = "Error",
+  children,
+}) => {
+  return (
+    <ShowError>
+      <h3>{heading}</h3>
+      {children}
+    </ShowError>
+  );
+};
diff --git a/packages/components/src/components/FunctionChart.tsx b/packages/components/src/components/FunctionChart.tsx
new file mode 100644
index 00000000..7625b2da
--- /dev/null
+++ b/packages/components/src/components/FunctionChart.tsx
@@ -0,0 +1,188 @@
+import * as React from "react";
+import _ from "lodash";
+import type { Spec } from "vega";
+import type { DistPlus } from "@quri/squiggle-lang";
+import { createClassFromSpec } from "react-vega";
+import * as percentilesSpec from "../vega-specs/spec-percentiles.json";
+import { DistPlusChart } from "./DistPlusChart";
+import { Error } from "./Error";
+
+let SquigglePercentilesChart = createClassFromSpec({
+  spec: percentilesSpec as Spec,
+});
+
+type distPlusFn = (
+  a: number
+) => { tag: "Ok"; value: DistPlus } | { tag: "Error"; value: string };
+
+const _rangeByCount = (start, stop, count) => {
+  const step = (stop - start) / (count - 1);
+  const items = _.range(start, stop, step);
+  const result = items.concat([stop]);
+  return result;
+};
+
+export const FunctionChart: React.FC<{
+  distPlusFn: distPlusFn;
+  diagramStart: number;
+  diagramStop: number;
+  diagramCount: number;
+}> = ({ distPlusFn, diagramStart, diagramStop, diagramCount }) => {
+  let [mouseOverlay, setMouseOverlay] = React.useState(NaN);
+  function handleHover(...args) {
+    setMouseOverlay(args[1]);
+  }
+  function handleOut(...args) {
+    setMouseOverlay(NaN);
+  }
+  const signalListeners = { mousemove: handleHover, mouseout: handleOut };
+  let percentileArray = [
+    0.01, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 0.99,
+  ];
+  let mouseItem = distPlusFn(mouseOverlay);
+  let showChart =
+    mouseItem.tag === "Ok" ? (
+      <DistPlusChart distPlus={mouseItem.value} width={400} height={140} />
+    ) : (
+      <></>
+    );
+  let data1 = _rangeByCount(diagramStart, diagramStop, diagramCount);
+  let valueData = data1
+    .map((x) => {
+      let result = distPlusFn(x);
+      if (result.tag === "Ok") {
+        return { x: x, value: result.value };
+      } else return null;
+    })
+    .filter((x) => x !== null)
+    .map(({ x, value }) => {
+      let percentiles = getPercentiles(percentileArray, value);
+      return {
+        x: x,
+        p1: percentiles[0],
+        p5: percentiles[1],
+        p10: percentiles[2],
+        p20: percentiles[3],
+        p30: percentiles[4],
+        p40: percentiles[5],
+        p50: percentiles[6],
+        p60: percentiles[7],
+        p70: percentiles[8],
+        p80: percentiles[9],
+        p90: percentiles[10],
+        p95: percentiles[11],
+        p99: percentiles[12],
+      };
+    });
+
+  let errorData = data1
+    .map((x) => {
+      let result = distPlusFn(x);
+      if (result.tag === "Error") {
+        return { x: x, error: result.value };
+      } else return null;
+    })
+    .filter((x) => x !== null);
+  let error2 = _.groupBy(errorData, (x) => x.error);
+  return (
+    <>
+      <SquigglePercentilesChart
+        data={{ facet: valueData }}
+        actions={false}
+        signalListeners={signalListeners}
+      />
+      {showChart}
+      {_.keysIn(error2).map((k) => (
+        <Error heading={k}>
+          {`Values: [${error2[k].map((r) => r.x.toFixed(2)).join(",")}]`}
+        </Error>
+      ))}
+    </>
+  );
+};
+
+function getPercentiles(percentiles: number[], t: DistPlus) {
+  if (t.pointSetDist.tag === "Discrete") {
+    let total = 0;
+    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
+    let bounds = percentiles.map((_) => maxX);
+    _.zipWith(
+      t.pointSetDist.value.xyShape.xs,
+      t.pointSetDist.value.xyShape.ys,
+      (x, y) => {
+        total += y;
+        percentiles.forEach((v, i) => {
+          if (total > v && bounds[i] === maxX) {
+            bounds[i] = x;
+          }
+        });
+      }
+    );
+    return bounds;
+  } else if (t.pointSetDist.tag === "Continuous") {
+    let total = 0;
+    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
+    let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
+    let bounds = percentiles.map((_) => maxX);
+    _.zipWith(
+      t.pointSetDist.value.xyShape.xs,
+      t.pointSetDist.value.xyShape.ys,
+      (x, y) => {
+        total += y / totalY;
+        percentiles.forEach((v, i) => {
+          if (total > v && bounds[i] === maxX) {
+            bounds[i] = x;
+          }
+        });
+      }
+    );
+    return bounds;
+  } else if (t.pointSetDist.tag === "Mixed") {
+    let discreteShape = t.pointSetDist.value.discrete.xyShape;
+    let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
+
+    let discretePoints = _.zip(discreteShape.xs, discreteShape.ys);
+    let continuousShape = t.pointSetDist.value.continuous.xyShape;
+    let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
+
+    interface labeledPoint {
+      x: number;
+      y: number;
+      type: "discrete" | "continuous";
+    }
+
+    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
+      x: x,
+      y: y,
+      type: "discrete",
+    }));
+    let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
+      x: x,
+      y: y,
+      type: "continuous",
+    }));
+
+    let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
+
+    let totalContinuous = 1 - totalDiscrete;
+    let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
+
+    let total = 0;
+    let maxX = _.max(sortedPoints.map((x) => x.x));
+    let bounds = percentiles.map((_) => maxX);
+    sortedPoints.map((point: labeledPoint) => {
+      if (point.type === "discrete") {
+        total += point.y;
+      } else if (point.type === "continuous") {
+        total += (point.y / totalY) * totalContinuous;
+      }
+      percentiles.forEach((v, i) => {
+        if (total > v && bounds[i] === maxX) {
+          bounds[i] = total;
+        }
+      });
+      return total;
+    });
+    return bounds;
+  }
+}
diff --git a/packages/components/src/NumberShower.tsx b/packages/components/src/components/NumberShower.tsx
similarity index 100%
rename from packages/components/src/NumberShower.tsx
rename to packages/components/src/components/NumberShower.tsx
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
new file mode 100644
index 00000000..f5dc5667
--- /dev/null
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -0,0 +1,91 @@
+import * as React from "react";
+import _ from "lodash";
+import { run } from "@quri/squiggle-lang";
+import type {
+  SamplingInputs,
+  exportEnv,
+  exportDistribution,
+} from "@quri/squiggle-lang";
+import { NumberShower } from "./NumberShower";
+import { DistPlusChart } from "./DistPlusChart";
+import { FunctionChart } from "./FunctionChart";
+import { Error } from "./Error";
+
+export interface SquiggleChartProps {
+  /** The input string for squiggle */
+  squiggleString?: string;
+  /** If the output requires monte carlo sampling, the amount of samples */
+  sampleCount?: number;
+  /** The amount of points returned to draw the distribution */
+  outputXYPoints?: number;
+  kernelWidth?: number;
+  pointDistLength?: number;
+  /** If the result is a function, where the function starts */
+  diagramStart?: number;
+  /** If the result is a function, where the function ends */
+  diagramStop?: number;
+  /** If the result is a function, how many points along the function it samples */
+  diagramCount?: number;
+  /** variables declared before this expression */
+  environment?: exportEnv;
+  /** When the environment changes */
+  onEnvChange?(env: exportEnv): void;
+  /** CSS width of the element */
+  width?: number;
+  height?: number;
+}
+
+export const SquiggleChart: React.FC<SquiggleChartProps> = ({
+  squiggleString = "",
+  sampleCount = 1000,
+  outputXYPoints = 1000,
+  kernelWidth,
+  pointDistLength = 1000,
+  diagramStart = 0,
+  diagramStop = 10,
+  diagramCount = 20,
+  environment = [],
+  onEnvChange = () => {},
+  width = 500,
+  height = 60,
+}: SquiggleChartProps) => {
+  let samplingInputs: SamplingInputs = {
+    sampleCount: sampleCount,
+    outputXYPoints: outputXYPoints,
+    kernelWidth: kernelWidth,
+    pointDistLength: pointDistLength,
+  };
+
+  let result = run(squiggleString, samplingInputs, environment);
+  if (result.tag === "Ok") {
+    let environment = result.value.environment;
+    let exports = result.value.exports;
+    onEnvChange(environment);
+    let chartResults = exports.map((chartResult: exportDistribution) => {
+      if (chartResult["NAME"] === "Float") {
+        return <NumberShower precision={3} number={chartResult["VAL"]} />;
+      } else if (chartResult["NAME"] === "DistPlus") {
+        return (
+          <DistPlusChart
+            distPlus={chartResult.VAL}
+            height={height}
+            width={width}
+          />
+        );
+      } else if (chartResult.NAME === "Function") {
+        return (
+          <FunctionChart
+            distPlusFn={chartResult.VAL}
+            diagramStart={diagramStart}
+            diagramStop={diagramStop}
+            diagramCount={diagramCount}
+          />
+        );
+      }
+    });
+    return <>{chartResults}</>;
+  } else if (result.tag === "Error") {
+    // At this point, we came across an error. What was our error?
+    return <Error heading={"Parse Error"}>{result.value}</Error>;
+  }
+};
diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
similarity index 100%
rename from packages/components/src/SquiggleEditor.tsx
rename to packages/components/src/components/SquiggleEditor.tsx
diff --git a/packages/components/src/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
similarity index 100%
rename from packages/components/src/SquigglePlayground.tsx
rename to packages/components/src/components/SquigglePlayground.tsx
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 48aa2b16..c16e5ac7 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,6 +1,6 @@
-export { SquiggleChart } from "./SquiggleChart";
-export { SquiggleEditor, renderSquiggleEditorToDom } from "./SquiggleEditor";
+export { SquiggleChart } from "./components/SquiggleChart";
+export { SquiggleEditor, renderSquiggleEditorToDom } from "./components/SquiggleEditor";
 import SquigglePlayground, {
   renderSquigglePlaygroundToDom,
-} from "./SquigglePlayground";
+} from "./components/SquigglePlayground";
 export { SquigglePlayground, renderSquigglePlaygroundToDom };
diff --git a/packages/components/src/stories/NumberShower.stories.mdx b/packages/components/src/stories/NumberShower.stories.mdx
index 5f040be5..fd9f39d1 100644
--- a/packages/components/src/stories/NumberShower.stories.mdx
+++ b/packages/components/src/stories/NumberShower.stories.mdx
@@ -1,4 +1,4 @@
-import { NumberShower } from "../NumberShower";
+import { NumberShower } from "../components/NumberShower";
 import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/NumberShower" component={NumberShower} />
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index 94273232..9c4799e1 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/packages/components/src/stories/SquiggleChart.stories.mdx
@@ -1,4 +1,4 @@
-import { SquiggleChart } from "../SquiggleChart";
+import { SquiggleChart } from "../components/SquiggleChart";
 import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/SquiggleChart" component={SquiggleChart} />
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index 9c86d4b6..3ae37bb3 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -1,4 +1,4 @@
-import { SquiggleEditor } from "../SquiggleEditor";
+import { SquiggleEditor } from "../components/SquiggleEditor";
 import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/SquiggleEditor" component={SquiggleEditor} />
diff --git a/packages/components/src/stories/SquigglePlayground.stories.mdx b/packages/components/src/stories/SquigglePlayground.stories.mdx
index 2964dadc..5aa20ba8 100644
--- a/packages/components/src/stories/SquigglePlayground.stories.mdx
+++ b/packages/components/src/stories/SquigglePlayground.stories.mdx
@@ -1,4 +1,4 @@
-import SquigglePlayground from "../SquigglePlayground";
+import SquigglePlayground from "../components/SquigglePlayground";
 import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/SquigglePlayground" component={SquigglePlayground} />
diff --git a/packages/components/src/spec-distributions.json b/packages/components/src/vega-specs/spec-distributions.json
similarity index 100%
rename from packages/components/src/spec-distributions.json
rename to packages/components/src/vega-specs/spec-distributions.json
diff --git a/packages/components/src/spec-percentiles.json b/packages/components/src/vega-specs/spec-percentiles.json
similarity index 100%
rename from packages/components/src/spec-percentiles.json
rename to packages/components/src/vega-specs/spec-percentiles.json
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 571a0de7..5152fc9b 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -16,7 +16,7 @@
     "declaration": true,
     "sourceMap": true
   },
-  "files": ["src/spec-distributions.json", "src/spec-percentiles.json"],
+  "files": ["src/vega-specs/spec-distributions.json", "src/vega-specs/spec-percentiles.json"],
   "target": "ES6",
   "include": ["src/**/*", "src/*"],
   "exclude": ["node_modules", "**/*.spec.ts", "webpack.config.js"],