Magic Console (alpha)
Interactive programming for Atom
Magic Console is a package for Atom that evaluates code in pretty much any language and renders the output alongside the source code. If that alone weren't good enough, it also visualizes the outputs in a human-friendly way (e.g. string as Markdown, array as table, object/dictionary as tree). Wait there's more! Visualizations are entirely pluggable, so you can take advantage of the core plugins and plugins created by the community or create a custom plugin for your specific application.
Features
- Visual
- Automatically visualize common data types
- Pluggable visualizations (using React components)
- Interactive
- Static and dynamic visualizations
- Re-evaluate source code on save
- Hot reload visualizations on save
- Automatically install NPM dependencies when declared in visualization source (coming soon!)
- Time-travel between past output states
- Universal
- Support for 68 programming languages (don't see your programming language, you can add support for it with a couple lines of code)
- Atom is cross-platform (OS X, Windows, Linux) and open-source
- Plug and play
- No configuration necessary
- No (dev) server necessary
Practical applications
Interactive playground
Use Magic Console to try out code, explore results, run experiments, etc.
Interactive testing
Use Magic Console to test code as you write it. Since you are evaluating your code in real-time, you don't need to write tests. Nonetheless, you can write assertions against your code and render the outputs using the Test plugin.
Interactive documentation
Use Magic Console to mix Markdown documentation with interactive code examples.
Getting started
Install
- Install Atom
- Clone the repo
git clone https://github.com/gnestor/magic-console.git
cd magic-console
- Install the dependencies
npm install
- Link the directory
apm link
Commands
Command | OS X | Linux/Windows | Notes |
---|---|---|---|
Magic Console: Toggle | CMD+ENTER | CTRL+ENTER | Evaluate current file or selected text |
Magic Console: Open plugins directory | Open the plugins directory in a new workspace | ||
Magic Console: Create new plugin | Create a new plugin and open it in the current workspace | ||
Magic Console: Step Backward | CMD+Z | CTRL+Z | Step back in output history |
Magic Console: Step Forward | CMD+SHIFT+Z or CMD+Y | CTRL+Y | Step forward in output history |
FAQ
I don't see any output...
The runtime for the source code must be supported by Magic Console and installed. For example, if your source code is a CoffeeScript file, then as long as the coffee-script runtime is installed, you're good to go because CoffeeScript is supported. If your source code is a Dogescript file, then you would need to add that runtime because it's not supported yet and have dogescript runtime installed.
I'm getting compilation errors...
Check out the active grammar for your source code in the lower-right side of the bottom status bar and make sure that it matches the programming language you are using. For example, if you are writing ES6 Javascript and you are seeing "Javascript" and not "Babel ES6 Javascript," you need to install the "Babel ES6 Javascript" grammar and use it instead.
How do I?
- Watch a file: Enable "Evaluate on save" in Magic Console's package settings
- Toggle between visualizations/plugins?: Hover over an output and use the drop-down selector to toggle between plugins available for that data type
- Edit a plugin's source code: Hover over the plugin and click the code button. The plugin source code will open in a new editor panel and allow you to edit the source code inline with its rendering. When the source code is saved, it will be hot reloaded and the rendering will be updated instantly.
- Clear the outputs: Hover out the outputs and click the clear button at the top.
- Copy/paste output: Hover over the outputs and click the copy button at the top to copy the raw output data to the clipboard.
- Import output data into another source file or application?: The output data for each source file is serialized in a hidden file by the same name in the same directory (
.helloWorld.js.json
forhelloWorld.js
). You can import this data as JSON like so (using Javascript):
import {outputs} from './.helloWorld.js.json'
Contributing
Use the Atom contributing guidelines
Workflow
- Re-install dependencies after pulling upstream changes
npm install
- Run Atom in dev mode
npm start
oratom --dev .
- Submit a pull request!
Thanks
- @nodejs, @atom, @facebook/react for laying the foundation
- @rgbkrk and community for atom-script
- @jupyter and @nteract communities for inspiration
Appendix
Supported runtimes
- 1C (BSL)
- AppleScript
- Bash
- Behat Feature
- C
- C++
- C#
- cript
- Clojure (via Leiningen)
- Coffeescript
- CoffeeScript (Literate)
- Crystal
- Cucumber (Gherkin)
- D
- DOT
- Elixir
- Erlang
- F#
- Forth (via GForth)
- Gnuplot
- Go
- Groovy
- Haskell
- ioLanguage
- Java
- Javascript
- JavaScript for Automation (JXA)
- Jolie
- Julia
- Kotlin
- LaTeX (via latexmk)
- LilyPond
- Lisp (via SBCL)
- Literate Haskell
- LiveScript
- Lua
- Makefile
- MoonScript
- MongoDB
- NCL#
- newLISP
- Nim (and NimScript)
- NSIS
- Objective-C
- Objective-C++
- OCaml
- Pandoc Markdown
- Perl
- Perl 6
- PHP
- PostgreSQL
- Prolog
- Python
- RSpec
- Racket
- RANT
- Ruby
- Ruby on Rails
- Rust
- Sage
- Sass/SCSS
- Scala
- Shell Script
- Swift
- TypeScript
- Dart
- Octave
- Zsh
Add a runtime
Clojure:
"Selection Based":
command: "lein"
args: (context) -> ['exec', '-e', context.getCode()]
"File Based":
command: "lein"
args: (context) -> ['exec', context.filepath]