jotacode

Junior Ribeiro

Back
How I Built a Ruby Playground for My Blog

How I Built a Ruby Playground for My Blog

Published onMarch 04, 2025
Junior RibeiroJunior
0Views
6Minutes Read

Why I Did This

So I've been learning Ruby lately. As I was diving into the language and exploring what it can do, I realized it would be super helpful to have an interactive environment right on my blog where I could:
  • Try out Ruby code snippets in real-time
  • Share working examples with my readers
  • Document my own learning progress
Most programming blogs just have static code blocks. I wanted something more dynamic - a playground where anyone could run, modify, and experiment with Ruby directly in the browser, without having to set up anything locally.

The End Result

Before we get into the technical stuff, here's what the final product looks like:
<RubyPlayground initialCode="puts 'Hello, World!'" />
The Ruby playground integrated into my blog, with code editor and output console

Tech Stack

Here's what I used to build this thing:

Frontend

  • tsx: For the UI and state management
  • Next.js: As the tsx framework for my blog
  • Tailwind CSS: For styling
  • Monaco Editor: The same editor that powers VS Code, for a rich coding experience
  • tsx-Resizable-Panels: For creating resizable panels

WebAssembly

  • Ruby WASM: Ruby compiled to WebAssembly (ruby-head-wasm-wasi)
  • @wasmer/wasi: To emulate the WASI environment in the browser
  • @wasmer/wasmfs: Virtual file system for the Ruby environment

Utilities

  • LZ-String: For compressing code in URL parameters
  • Lucide tsx: For icons

How I Built It

1. Setting Up WebAssembly for Ruby

The first challenge was getting Ruby to run in the browser. This was possible thanks to the Ruby WASM project, which compiles the Ruby interpreter to WebAssembly.
browserVm.ts
1 export class BrowserVm {
2  module: WebAssembly.Module;
3  vm: any;
4

5  async createVm(printToOutput: (line: string) => void) {
6    const response = await fetch(
7      'https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.3.0-2022-04-20-a/dist/ruby+stdlib.wasm'
8    );
9    const buffer = await response.arrayBuffer();
10    this.module = await WebAssembly.compile(buffer);
11

12    const { RubyVM } = await import('ruby-head-wasm-wasi/dist/index');
13    const { DefaultRubyVM } = await import('./browser');
14

15    const { vm } = await DefaultRubyVM(this.module, {
16      consolePrint: true,
17      consoleHandlers: { 1: printToOutput, 2: printToOutput },
18    });
19    this.vm = vm;
20  }
21}
Simplified architecture of Ruby running via WebAssembly in the browser

2. Creating the Editor Interface

For the editor interface, I used Monaco Editor, the same one that powers VS Code. This gave me features like syntax highlighting, autocompletion, and auto-formatting for Ruby.
CodeEditor.tsx
1 const CodeEditor = ({
2  code,
3  onChange,
4  height = '300px',
5  isFullScreen = false,
6}: CodeEditorProps) => {
7  const monaco = useMonaco();
8

9  useEffect(() => {
10    if (monaco) {
11      monaco.languages.registerCompletionItemProvider('ruby', {
12        // Ruby autocompletion configuration
13        // ...
14      });
15    }
16  }, [monaco]);
17

18  return (
19    <MonacoEditor
20      height={isFullScreen ? '70vh' : height}
21      language='ruby'
22      theme='vs-dark'
23      value={code}
24      onChange={onChange}
25      options={editorConfig}
26      onMount={handleEditorMount}
27    />
28  );
29};
Monaco Editor with Ruby syntax highlighting and autocompletion

3. Building the Output Console

To display the output of the Ruby code execution, I created a console component that captures and formats the output from the Ruby interpreter:
ConsoleOutput.tsx
1 const ConsoleOutput = ({
2  output,
3  isError,
4  isFullScreen = false,
5}: ConsoleOutputProps) => {
6  return (
7    <div
8      className={clsx(
9        'bg-neutral-900 text-neutral-50 py-3 px-4 overflow-y-auto',
10        isFullScreen ? `h-[70vh]` : 'h-[500px]',
11        isError && `!text-red-400`
12      )}
13    >
14      <code
15        className={clsx('text-sm')}
16        style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}
17      >
18        {output}
19      </code>
20    </div>
21  );
22};

4. Putting It All Together in the Main Component

The Playground component is the heart of the application, managing state, initializing the Ruby VM, and coordinating the interaction between the editor and console:
Playground.tsx
1 const Playground = ({
2  id = undefined,
3  isHeading = false,
4  initialCode,
5}: PlaygroundProps) => {
6  const [code, setCode] = useState<string>(initialCode ?? '');
7  const [output, setOutput] = useState<string>('');
8  const [isError, setError] = useState<boolean>(false);
9  const [isFullScreen, setFullScreen] = useState<boolean>(false);
10  const [isLoading, setIsLoading] = useState<boolean>(true);
11  const vmRef = useRef<BrowserVm | null>(null);
12  const outputBufferRef = useRef<string[]>([]);
13

14  useEffect(() => {
15    const initVM = async () => {
16      setIsLoading(true);
17      try {
18        const vm = new BrowserVm();
19        await vm.createVm((line: string) => {
20          outputBufferRef.current.push(line);
21          setOutput(outputBufferRef.current.join(''));
22        });
23        vmRef.current = vm;
24      } catch (error) {
25        setError(true);
26      } finally {
27        setIsLoading(false);
28      }
29    };
30

31    initVM();
32  }, []);
33

34  const handleRunCode = async () => {
35    // Logic to execute Ruby code
36    // ...
37  };
38

39  return (
40    <>
41      {isHeading && <PlaygroundHeader />}
42      <CodePlayground
43        id={id}
44        onFullScreen={handleFullScreen}
45        code={code}
46        output={isLoading ? 'Hello Ruby-Maniac... :)' : output}
47        isError={isError}
48        onRunCode={handleRunCode}
49        onSetCode={setCode}
50        onSetOutput={setOutput}
51      />
52      {/* Modal for fullscreen mode */}
53    </>
54  );
55};
Responsive layout with resizable panels

5. Challenges I Faced

I ran into several challenges while building this:

Memory Management

WebAssembly has memory limitations, and the Ruby interpreter can be memory-hungry. I had to optimize memory usage and implement mechanisms to prevent leaks.

Ruby Library Compatibility

Not all Ruby libraries work in the WebAssembly environment. I had to adapt some examples and make sure the basic functionality was available.

Performance

Running Ruby via WebAssembly is slower than native execution. I implemented visual indicators to show when code is running and optimized what I could.
Loading indicator during Ruby VM initialization

Cool Features

Code Sharing via URL

I implemented a system that lets you share code snippets through the URL, using LZ-String compression to keep the URL size manageable:
CodePlayground.tsx
1const queryString = window.location.search;
2const urlParams = new URLSearchParams(queryString);
3urlParams.set("q", LZString.compressToEncodedURIComponent(codeEditor.getValue()));
4urlParams.delete("q2");
5history.replaceState('', '', "?" + urlParams.toString());

Fullscreen Mode

For a more immersive coding experience, I added a fullscreen mode that expands the playground:
PanelFooter.tsx
1 const PanelFooter = ({
2  isFullScreen,
3  onCloseFullScreen,
4  onFullScreen,
5}: PanelFooterProps) => {
6  return (
7    <div className='flex items-center justify-between bg-neutral-900 border border-neutral-700 border-t-0 py-1 px-2 rounded-b-md'>
8      <div className='text-sm font-sora items-center text-neutral-500'>
9        &copy; <a href={siteMetadata.siteUrl}>{siteMetadata.siteShortTitle}</a>
10      </div>
11      {isFullScreen ? (
12        <Tooltip title='Close'>
13          <ExitFullScreenIcon
14            size={22}
15            onClick={onCloseFullScreen}
16            className=' text-neutral-500 cursor-pointer'
17          />
18        </Tooltip>
19      ) : (
20        <Tooltip title='Fullscreen'>
21          <FullScreenIcon
22            size={22}
23            onClick={onFullScreen}
24            className=' text-neutral-500 cursor-pointer'
25          />
26        </Tooltip>
27      )}
28    </div>
29  );
30};
Playground in fullscreen mode

Simple Graphics Support

I added support for drawing simple graphics using a pixel buffer:
Ruby.rb
1 def set_pixel(x, y, color)
2  JS::eval("frameBuffer[#{y} * 100 + #{x}] = #{color}")
3end
4

5# Draw a red square
610.times do |x|
7  10.times do |y|
8    set_pixel(x + 10, y + 10, 0xFF0000FF)
9  end
10end
Example graphic generated by Ruby code

Blog Integration

To integrate the playground into my Next.js-based blog, I created a tsx component that can be easily included in any MDX post:
Playground.tsx
1 // Example usage in an MDX post
2<Playground 
3  isHeading={true}
4  initialCode={`puts "Hello, Ruby World!"
5# Try modifying this code
6[1, 2, 3, 4, 5].each do |n|
7  puts n * n
8end`} 
9/>

What I Learned

This project taught me a lot about:
  1. WebAssembly: How to compile and run programming languages in the browser
  2. Advanced tsx: Complex state management and refs
  3. Performance Optimization: How to handle intensive operations in the browser
  4. Developer Tool UX: How to create an intuitive user experience for programming tools

What's Next

I have several plans to improve the playground:
  1. Gem Support: Add support for popular Ruby gems
  2. Persistence: Save code in localStorage so you can continue where you left off
  3. Pre-loaded Examples: Library of examples for learning
  4. Better Rails Integration: Add Rails-specific examples

Wrapping Up

Building a Ruby playground for my blog was a fascinating technical challenge that combined my interest in Ruby with my knowledge of modern web development. The result is a tool that not only helps me learn and experiment with Ruby but also enriches the experience for my blog readers.
If you're thinking about building something similar, I hope this post has given you some useful insights into the technologies and approaches you can use. The complete source code is available on my GitHub, and I'm always open to suggestions and contributions.
Happy Ruby coding! 💎
This post is part of my journey learning Ruby and web development. Share your thoughts and suggestions in the comments below.
Share:
Tags
#Ruby
#Playground
#Code
#Syntax
#Reference
Previous