Sketch-n-Sketch
Syntax GuideLittle Standard Library (Prelude)About Sketch-n-Sketchv0.7.0
File
New SVGNew HTMLNew From Template...Save As...Save
Open...
Export CodeExport HTML
Import Code...Import HTML
Code Tools
Type Information...Introduce Type Alias from Args...Rename Type...Rename Data Constructor...Duplicate Data Constructor...Convert to Data Type...
Replace hole (select from menu)...Replace hole (autocomplete)...Replace wildcard...
Add a child...Delete (i.e. replace with a hole)...
Create Function from Definition...Create Function from Arguments...
Add Argument...Reorder Arguments...
Rename Variable...Introduce Local Variable...
Make Equal with Single Variable...Make Equal by Copying...Make Equal by Copying...
Move Definition...Inline Definition...
Format...
View
Output Type▸
●Graphics○HTML (Text)○Value (Text)
Main LayerWidget Layer
Ghost Layer▸
●On○Off
Reset Interface Layout
Options
Font Size▸
○8○10○12○14●16○18○20○22○24
Color Scheme▸
●Light○Dark
Auto-Run▸
Every secondEvery 2 secondsEvery 3 seconds
Enable Type Checking▸
○True●False
Enable Text Edits▸
●True○False
Enable Deuce Box Selection▸
●True○False
Enable Deuce Text Selection▸
●True○False
Code Tools Menu▸
●All○Active○Disabled
Output Tools Menu▸
○Enabled●Disabled
Text Selection Mode▸
○Strict○Superset○Subset●SubsetExtra
Allow Multiple Target Positions▸
○True●False
Shape Code Templates▸
●Raw○Stretchy○Sticky
Automatically Suggest Code Changes▸
○On●Off
Output Synchronization▸
○Auto (Value Backpropagation)●Manual (Value Backpropagation)○Live (Traces / Triggers)○Delayed (Traces / Triggers)
Live Update Heuristics▸
●Biased○None○Fair
▸ Previous ExampleNext Example ▸
Current file: Untitled (Get Started)
⟲ Undo⟳ Redo
Run ▸
1
2
title = "Sketch-n-Sketch Docs"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
⦀

Welcome to Sketch-n-Sketch Docs!

What's this? Sketch-n-Sketch Docs provides a reversible general-purpose language. You can edit both the program (on the left/top) or the resulting value (on the right/bottom). For example:

"Hello and Hello world"
This is blue, change me!

Turn auto-sync on (on the right) to see the changes be applied immediately if they are not ambiguous !

See some more examples from File -> New From Template in the menu bar, or by pressing the Previous and Next buttons in the top-right corner.

GUI
HTML
Value
Auto Sync
Synthesizing... ⏳ ⏰ 👵🏽 👴🏼 ⚰️ 🏁
Code Tools
There are no available tools based on these selections. Press Escape to clear.
Totally broken!
    Configuration Panel
    Output Editor
    Update Program▸
    Synthesizing... ⏳ ⏰ 👵🏽 👴🏼 ⚰️ 🏁

    New From Template...

    Welcome

    Blank Svg DocumentBlank Html DocumentGet Started

    Examples (OOPSLA 2018 Submission)

    1a: Table of States1b: Table of States1c: Table of States2: ICFP tutorial3: Conference Budget4: Model View Controller5: Scalable Recipe Editor6: Cloning Editor7: Translation Editor8: Markdown Editor9: Dixit Scoresheet10: Doodle11: Universal numbers12: LaTeX Editor13: REPL with SVG14: Slides15: Docs16: Html regex replace: references17: String join, concatMap18: Lens: Maybe Map19: Lens: List Map 120: Lens: List Map 221: Lens: List Append

    Deuce Examples

    Sketch-n-Sketch LogoTargetBatteryCoffee MugMondrian Arch

    Default Icons

    Icon: CursorIcon: Point Or OffsetIcon: TextIcon: LineIcon: RectIcon: EllipseIcon: PolygonIcon: Path

    Logos

    Active Trans LogoBotanic Garden LogoBotanic Garden Logo (UIST)Cover LogoElm LogoFloral Logo 1Floral Logo 2Haskell.org LogoLogoLogo 2POP-PL LogoSnS Logo (UIST)SnS Logo Revisited (UIST)SnS Logo Wheel

    Flags

    Chicago FlagFrench Sudan FlagUS-13 FlagUS-50 Flag

    Other

    Coffee Mugs (UIST)Wave BoxesWave Boxes GridBasic SlidesSailboatSlidersButtonsWidgetsxySliderOffsetsTile PatternColor PickerFerris WheelFerris Task BeforeFerris Task AfterFerris Wheel SlideshowSurvey ResultsHilbert Curve AnimationBar GraphPie ChartSolar SystemCliqueEye IconHorror FilmsCycling AssociationLillicon PLillicon P, v2KeyboardKeyboard Task BeforeKeyboard Task AfterTessellation Task BeforeTessellation Task AfterTessellation 2Spiral Spiral-GraphRounded RectThaw/FreezeDictionaries3 BoxesN Boxes SliN BoxesRingsPolygonsStarsTrianglesFrank Lloyd WrightFrank Lloyd Wright BBezier CurvesFractal TreeStick FiguresMatrix TransformationsMisc ShapesInterface ButtonsPaths 1Paths 2Paths 3Paths 4Paths 5Sample RotationsGrid TileZonesRectangle TrisectionBatteryBattery (Dynamic)Mondrian ArchLadderRailsTargetXsConiferFerris Wheel 3GearKoch SnowflakeReplace Terminals With WorkstationsBalance ScalePencil TipCalendar IconSVG Cat

    Deuce User Study

    Deuce Study StartStep 01Step 02Step 03Step 04Step 05Step 06Step 07Step 08Step 09Step 10Step 11Step 12Step 13Step 14Step 15Step 16Step 17Step 18Step 19Step 20Step 21Step 22Step 23Deuce Study Transition 1One RectangleTwo CirclesThree RectanglesTarget IconDeuce Study Transition 2Four SquaresLambda IconDeuce Study End

    (Internal Things...)

    Standard PreludeBad Prelude

    Save As...

    Filename (default .elm)

    Save

    Current Files

    ~BACKUP.elm

    Open...

    ~BACKUP.elmOpenDelete

    Warning

    Untitled (Get Started) has unsaved changes. Would you like to continue anyway?
    CancelYes (Discard Changes)

    Import Code...



    Import