# Scratch buffer using space script

**URL:** <https://community.silverbullet.md/t/scratch-buffer-using-space-script/618>\
**Category:** Tricks & Techniques\
**Created:** [July 11, 2024, 7:23am UTC](https://community.silverbullet.md/t/scratch-buffer-using-space-script/618 "2024-07-11T07:23:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![justyns](https://community.silverbullet.md/user_avatar/community.silverbullet.md/justyns/32/132_2.png) [@justyns](https://community.silverbullet.md/u/justyns)\
**Post date:** [July 11, 2024, 7:23am UTC](https://community.silverbullet.md/t/scratch-buffer-using-space-script/618/1 "2024-07-11T07:23:01Z")

</div>

I used to be a heavy emacs/org-mode user, and something I miss from time to time is an easy way to open a scratch buffer for temporary notes.

Silverbullet doesn’t support multiple panes/split windows/etc, but does have “panels” that I was curious if I could abuse. Originally I was going to make a side panel that just has a simple text box, but then I realized I could make that side panel have an iframe to silverbullet itself. Since silverbullet is pretty minimal , we just have to hide the toolbar and it looks clean.

The result is that I can run `Toggle Scratch Buffer` and the RHS(right-hand-side) panel opens up and loads an iframe to `/scratch` which is just a note named scratch.

![sb-buffer-panel](https://community.silverbullet.md/uploads/default/original/1X/17c19c368ae26e9f2dece2a63cc145fc5c16f101.gif)

It’s a bit finicky since it’s a full-blown client, but it works decently well for what I wanted. And another example of how useful spacescript can be.

```javascript
silverbullet.registerCommand({ name: "Toggle Scratch Buffer" }, async () => {
  const scratchPage = 'scratch';

  // panelPos can be rhs, lhs, or bhs
  const panelPos = 'rhs';

  if (window.panelVisible) {
    await syscall("editor.hidePanel", panelPos);
    window.panelVisible = false;
    return;
  }

  const scratchBufferHtml = `
    <html>
    <head>
      <link rel="stylesheet" href="/.client/main.css" />
      <style>
        body {
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        .scratch-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          background: #f0f0f0;
          border-bottom: 1px solid #ccc;
        }
        .scratch-content-wrapper {
          flex-grow: 1;
          display: flex;
        }
        .scratch-content {
          width: 100%;
          height: 100%;
          border: none;
        }
      </style>
    </head>
    <body>
      <div class="scratch-content-wrapper">
        <iframe src="/${scratchPage}" class="scratch-content"></iframe>
      </div>
    </body>
    </html>`;

  const scratchBufferJs = `
    document.querySelector('iframe').addEventListener('load', function () {
      console.log('Iframe loaded');
      setTimeout(() => {
        const iframeDoc = this.contentDocument || this.contentWindow.document;
        console.log('iframeDoc:', iframeDoc);
        const sbTop = iframeDoc.getElementById('sb-top');
        console.log('sbTop:', sbTop);
        if (sbTop) {
          sbTop.style.display = 'none';
        } else {
          console.error('sb-top element not found');
        }
      }, 1000); // Delay to make sure sb-top exists before hiding it
    });
  `;

  await syscall("editor.showPanel", panelPos, 2, scratchBufferHtml, scratchBufferJs);
  window.panelVisible = true;
});

```

---

<div class="post-metadata">

**Author:** ![zef](https://community.silverbullet.md/user_avatar/community.silverbullet.md/zef/32/7_2.png) [@zef](https://community.silverbullet.md/u/zef)\
**Post date:** [July 11, 2024, 5:31pm UTC](https://community.silverbullet.md/t/scratch-buffer-using-space-script/618/2 "2024-07-11T17:31:51Z")

</div>

This is a pretty cool hack! When you start positioning a tool as one for people with a hacker’s mindset, I suppose this is what you get 😂