Welcome to ScalaFiddle
36 | 37 |ScalaFiddle is an online playground for creating, sharing and embedding Scala fiddles (little Scala programs that 38 | run 39 | directly in your browser).
40 | 41 |Quick start
42 | 43 |Just write some Scala code in the editor on the left and click the Run button (or press Ctrl-Enter on Windows/Linux, or
45 | Cmd-Enter on macos) to compile and run your code. The result will be shown
46 | here, replacing this documentation. You can
47 | always get this page back by clicking the Help button.
A truly simple example to get you started:
50 | 51 |println("Hello world!")
54 | Saving your masterpiece
59 | 60 |To make the fruit of your labors immortal, click the Save button. This will assign a random
61 | identifier to your fiddle and
62 | update the page URL to something like https://scalafiddle.io/sf/S0mXhH9/0.
63 | The last part of the URL is a version number,
64 | which is incremented every time you updated the fiddle. This means that once a fiddle is saved, it cannot be
65 | modified, but a
66 | new version can be created.
By default, all fiddles are anonymous, but if you want to keep them under your own control, you should 69 | create an account 70 | via Sign in with GitHub. This way no one else but you can update the saved fiddle. Others can 71 | only Fork it to 72 | continue work under their own account.
73 | 74 |To make sure you can later find your fiddle, remember to add a Name and 75 | Description to your fiddle before saving.
76 | 77 |Using libraries
78 | 79 |You can experiment with different supported Scala libraries by selecting them from the Libraries 80 | section on the left 81 | sidebar. Just press the + button to add a library to your fiddle, and X to 82 | remove it. The latest version is shown by 83 | default, but you can also Show all versions if you need to work with an older one.
84 | 85 |
By default new fiddles use Scala 2.12, but you can also select another Scala version.
88 | 89 |Editing code
90 | 91 |Although the editor in ScalaFiddle is no match for a full IDE, it’s quite adequate for small fiddles. It provides
92 | rudimentary
93 | syntax highlighting and things like search (Ctrl/Cmd-F). You can
94 | also access code completion by pressing Ctrl/Cmd-Space
95 | to get a list of potential completions suitable for that location. Note that this feature actually calls the
96 | remote compiler
97 | to perform the code completion, so there might be a slight delay.
Your fiddle code is actually contained in a template, which you can show by clicking the SCALA 100 | button in the top-right 101 | corner of the editor.
102 | 103 |
This template makes sure your code is contained in a single object that is exposed to JavaScript so that 106 | it can be 107 | executed. Normally you don’t need to deal with the template, but sometimes you need to take things outside this 108 | object and 109 | then it’s necessary to edit the code on the outside.
110 | 111 |Special features
112 | 113 |Because ScalaFiddle runs in the browser, you can access browser features like the DOM and Canvas in your fiddle.
114 | There is a
115 | helper object called Fiddle that contains methods for accessing the DOM
116 | and the built-in canvas.
Using the DOM
119 | 120 |The simplest way for using the DOM is to generate your DOM elements using the included Scalatags
121 | library. For this you
122 | need to import scalatags.JsDom.all._ and use Fiddle.print to show the DOM, as in the example below.
import scalatags.JsDom.all._
127 |
128 | val h = h1("Hello world").render
131 | Fiddle.print(h)
133 | You can also make the DOM interactive as demonstrated by the simple fiddle below:
138 | 139 |import scalatags.JsDom.all._
141 |
142 | val textInput = input(placeholder := "write text here").render
145 | val lengthButton = button("Length").render
148 | val result = p.render
150 | lengthButton.onclick = (e: Any) => result.innerHTML = textInput.value.length.toString
156 |
157 | Fiddle.print(div(textInput, lengthButton), result)
161 | Drawing to canvas
166 | 167 |ScalaFiddle automatically provides a rectangular canvas in the output panel that you can use for drawing. The
168 | canvas drawing
169 | context is accessible via Fiddle.draw and represents a
170 | CanvasRenderingContext2D
171 |
To draw a small 50 by 50 pixel rectangle at position 10,10:
174 |Fiddle.draw.rect(10, 10, 50, 50)
179 | Fiddle.draw.stroke
180 | For a more complex example, check out the Hilbert 185 | curve demonstration
186 | 187 |Embedding
188 | 189 |While editing and sharing fiddles on scalafiddle.io website is great, you can also embed your fiddles to any web 190 | page you 191 | like. The embedded fiddle provides interactive editing, so you could for example include a short example on your 192 | documentation site or in your blog and have viewers play with it right there, on your own page.
193 | 194 |To create an embedded fiddle, just click the Embed button, which will present you with some 195 | options, the HTML code you 196 | need to copy paste, and a preview of what the embedded fiddle will look like.
197 | 198 |
Embedding instructive fiddles to your library documentation is a great way to let your library users try out 201 | features without 202 | installing anything.
203 | 204 |Integration to documentation
205 | 206 |ScalaFiddle can also be integrated directly into documentation without embedding from the editor. See the section 207 | on 208 | ScalaFiddle 209 | integration for more information.
210 | 211 |Source
212 | 213 |ScalaFiddle is open source and you can find all the source code in GitHub 215 | repositories.
216 | 217 |