Deno Blocks

Overview

• Prompt: Build a Cloud IDE for the Deno Subhosting Hackathon.
• Demo URL: blocks.deno.dev

For the Deno Subhosting Hackathon, we've developed an IDE built with Fresh and Blockly that allows you to drag and drop pieces to write code.

Accolades

Ryan's favorite (1st place) and Most fun at the Deno Subhosting Hackathon.

Known issues/future work

• UI accessibility.
• Add environment variables to deployment.
• Real-time project workspace synchronization with kv.watch.
• Editable project metadata.
• Deno Blocks toolbox versioning.
• Resizable IDE panels.
• Use prismjs syntax highlighted code in generated code output panel.
• Add compiler errors output panel with ts-morph.
• Generate gfm documentation from markdown
• More? Open an issue.

Development

Make sure to install Deno: https://deno.land/manual/getting_started/installation

Then start the project:

deno task start

This will watch the project directory and restart as necessary.

Credits

• Deno.
• Icon artwork by @_tanakaworld.

---

Developed with 🦕