For visual languages, a picture is worth a thousand words

code/LanguagePage.ts

@@ -239,10 +239,13 @@ pipeTable
   }
 
   toScroll() {
-    const { typeName, title, id } = this.file
+    const { file } = this
+    const { typeName, title, id } = file
 
     if (title.includes("%20")) throw new Error("bad space in title: " + title)
 
+    const screenshot = file.get("screenshot")
+
     return `title ${title}
 
 import settings.scroll
@@ -259,6 +262,15 @@ ${this.tryNowRepls}
 
 ${this.monacoEditor}
 
+${
+  screenshot
+    ? `image ${screenshot.replace(
+        "https://pldb.com/",
+        "../"
+      )}\n caption A screenshot of ${title}.`
+    : ""
+}
+
 ${this.descriptionSection}
 
 ${this.factsSection}

database/grammar/screenshot.grammar

@@ -0,0 +1,4 @@
+screenshotNode
+ description For visual languages, a picture is worth a thousand words. Provide the URL to the screenshot in the form: https://pldb.com/site/screenshots/[pldbId].png
+ extends abstractUrlNode
+ cruxFromId

database/things/explorer.pldb

@@ -1,6 +1,7 @@
 title Explorer
 appeared 2020
 type visual
+screenshot https://pldb.com/screenshots/explorer.png
 creators Hannah Ritchie and Breck Yunits and Shahid Ahmad
 description Programs are encoded as TSVs so are easy to read+write from a spreadsheet IDE, code, or plain text editor. 
 reference https://github.com/owid/owid-grapher/tree/master/explorer

database/things/scratch.pldb

@@ -1,6 +1,7 @@
 title Scratch
 appeared 2002
 type visual
+screenshot https://pldb.com/screenshots/scratch.png
 website https://scratch.mit.edu/
 fileExtensions scratch sb sprite sb2 sprite2
 domainName scratch.mit.edu