diff --git a/public/images/grist.png b/public/images/grist.png
new file mode 100644
index 000000000..edce36dec
Binary files /dev/null and b/public/images/grist.png differ
diff --git a/shared/editor/embeds/Grist.test.tsx b/shared/editor/embeds/Grist.test.tsx
new file mode 100644
index 000000000..b01bdbb02
--- /dev/null
+++ b/shared/editor/embeds/Grist.test.tsx
@@ -0,0 +1,33 @@
+import Grist from "./Grist";
+
+describe("Grist", () => {
+ const match = Grist.ENABLED[0];
+
+ test("to be enabled on share link", () => {
+ expect(
+ "https://templates.getgrist.com/doc/afterschool-program/p/2?embed=true".match(
+ match
+ )
+ ).toBeTruthy();
+ expect(
+ "https://docs.getgrist.com/sg5V93LuAije/Untitled-document/p/22?embed=true".match(
+ match
+ )
+ ).toBeTruthy();
+ expect(
+ "https://templates.getgrist.com/doc/afterschool-program".match(match)
+ ).toBeTruthy();
+ });
+
+ test("to not be enabled elsewhere", () => {
+ // Self hosted not yet supported
+ expect(
+ "http://grist.my.host.com/o/docs/doc/new~5cCkr6CtMArdA62ohSy5xB/p/1?embed=true".match(
+ match
+ )
+ ).toBe(null);
+ expect(
+ "https://my.get.grist.com/doc/afterschool-program?embed=true".match(match)
+ ).toBe(null);
+ });
+});
diff --git a/shared/editor/embeds/Grist.tsx b/shared/editor/embeds/Grist.tsx
new file mode 100644
index 000000000..a10af4068
--- /dev/null
+++ b/shared/editor/embeds/Grist.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import Frame from "../components/Frame";
+import Image from "../components/Image";
+import { EmbedProps as Props } from ".";
+
+function Grist(props: Props) {
+ return (
+
+ }
+ title="Grist Spreadsheet"
+ border
+ />
+ );
+}
+
+Grist.ENABLED = [new RegExp("^https?://([a-z.-]+\\.)?getgrist\\.com/(.+)$")];
+
+export default Grist;
diff --git a/shared/editor/embeds/index.tsx b/shared/editor/embeds/index.tsx
index e2e1ddc7f..2538ab782 100644
--- a/shared/editor/embeds/index.tsx
+++ b/shared/editor/embeds/index.tsx
@@ -24,6 +24,7 @@ import GoogleDrive from "./GoogleDrive";
import GoogleForms from "./GoogleForms";
import GoogleSheets from "./GoogleSheets";
import GoogleSlides from "./GoogleSlides";
+import Grist from "./Grist";
import InVision from "./InVision";
import JSFiddle from "./JSFiddle";
import Loom from "./Loom";
@@ -241,6 +242,13 @@ const embeds: EmbedDescriptor[] = [
component: GoogleForms,
matcher: matcher(GoogleForms),
},
+ {
+ title: "Grist",
+ keywords: "spreadsheet",
+ icon: () =>
,
+ component: Grist,
+ matcher: matcher(Grist),
+ },
{
title: "InVision",
keywords: "design prototype",