1"use strict";(globalThis.webpackChunkvoiden_docs=globalThis.webpackChunkvoiden_docs||[]).push([[6204],{407:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/drag-and-drop-4eb98cf91cdeca1f69411f74196ba765.gif"},1505:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/extendable-35939f0e431a259d879b265c25647c3f.gif"},1894:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/multiple-window-fcebd2a1b2b9e0b875e861fcdf7440e4.gif"},2055:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/voiden-editor-13c4b44075ffee8fe6ccd42dc4d39589.png"},4506:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>l});const i=JSON.parse('{"id":"getting-started-section/getting-started/the-basics","title":"Voiden Basics","description":"Before you start conjuring API magic, let\u2019s cover a few Voiden fundamentals \u2014 the kind that make everything click.","source":"@site/docs/getting-started-section/getting-started/the-basics.md","sourceDirName":"getting-started-section/getting-started","slug":"/getting-started-section/getting-started/the-basics","permalink":"/docs/getting-started-section/getting-started/the-basics","draft":false,"unlisted":false,"editUrl":"https://github.com/VoidenHQ/docs/tree/main/docs/getting-started-section/getting-started/the-basics.md","tags":[],"version":"current","lastUpdatedAt":1790754496000,"sidebarPosition":1,"frontMatter":{"id":"the-basics","title":"Voiden Basics","sidebar_label":"Voiden Basics","sidebar_position":1},"sidebar":"tutorialSidebar","previous":{"title":"OpenAPI Schema Validation","permalink":"/docs/getting-started-section/getting-started/openapi-validation"},"next":{"title":"Appearance","permalink":"/docs/getting-started-section/settings/appearance-setting"}}');var s=n(4848),o=n(8453);const r={id:"the-basics",title:"Voiden Basics",sidebar_label:"Voiden Basics",sidebar_position:1},a="The Basics",d={},l=[{value:"The Voiden Editor",id:"the-voiden-editor",level:2},{value:"Files and Structure",id:"files-and-structure",level:2},{value:"Git-Friendly by Design",id:"git-friendly-by-design",level:2},{value:"Voiden Terminal",id:"voiden-terminal",level:2},{value:"Drag & Drop Blocks",id:"drag--drop-blocks",level:2},{value:"Select & Move Multiple Blocks",id:"select--move-multiple-blocks",level:2},{value:"Response Panel",id:"response-panel",level:2},{value:"Flexible Layout",id:"flexible-layout",level:3},{value:"Extendable with Tabs",id:"extendable-with-tabs",level:3},{value:"Multiple Windows",id:"multiple-windows",level:3},{value:"Ready to get started?",id:"ready-to-get-started",level:3}];function c(e){const t={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"the-basics",children:"The Basics"})}),"\n",(0,s.jsx)(t.p,{children:"Before you start conjuring API magic, let\u2019s cover a few Voiden fundamentals \u2014 the kind that make everything click."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"the-voiden-editor",children:"The Voiden Editor"}),"\n",(0,s.jsxs)(t.p,{children:["Voiden ships with its own custom editor, built on top of ",(0,s.jsx)(t.strong,{children:"Tiptap"})," (a rich-text editor that\u2019s secretly Markdown in a nice outfit).",(0,s.jsx)(t.br,{}),"\n","This isn\u2019t just a text box \u2014 it\u2019s your playground for building, linking, and commenting on API blocks like a pro."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"editor",src:n(2055).A+"",width:"2452",height:"1670"})}),"\n",(0,s.jsxs)(t.p,{children:["You can write, format, insert blocks, comment on JSON, add notes, and still keep everything cleanly stored as Markdown underneath.",(0,s.jsx)(t.br,{}),"\n","Because plain text is forever."]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"files-and-structure",children:"Files and Structure"}),"\n",(0,s.jsxs)(t.p,{children:["Everything in Voiden is, at its core, a ",(0,s.jsx)(t.strong,{children:"Markdown file"}),".",(0,s.jsx)(t.br,{}),"\n","We just use the ",(0,s.jsx)(t.code,{children:".void"})," extension \u2014 not because we\u2019re fancy, but because it makes it easier for Voiden to process your files, track blocks, and work its behind-the-scenes magic."]}),"\n",(0,s.jsx)("img",{src:"/img/geetingstarted/file.png",alt:"structure",width:"500",style:{borderRadius:"12px"}}),"\n",(0,s.jsxs)(t.p,{children:["Think of ",(0,s.jsx)(t.code,{children:".void"})," files as Markdown with superpowers. They\u2019re still readable, editable, and totally version-controllable."]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"git-friendly-by-design",children:"Git-Friendly by De
1sign"}),"\n",(0,s.jsxs)(t.p,{children:["No databases. No proprietary formats. No \u201cexport to Markdown\u201d button.",(0,s.jsx)(t.br,{}),"\n","Your Voiden projects are ",(0,s.jsx)(t.strong,{children:"pure Markdown"}),", ready to commit, diff, merge, and roll back \u2014 just like any source code."]}),"\n",(0,s.jsxs)(t.p,{children:["Want to know how Voiden works with Git? Check out the ",(0,s.jsx)(t.a,{href:"/docs/git-integration/overview",children:(0,s.jsx)(t.strong,{children:"Git Integration documentation."})})]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"git-gui",src:n(8754).A+"",width:"2316",height:"1553"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Want to see what changed? Run ",(0,s.jsx)(t.code,{children:"git diff"}),"."]}),"\n",(0,s.jsx)(t.li,{children:"Need to resolve a conflict? Open it in your favorite editor."}),"\n",(0,s.jsx)(t.li,{children:"Want to brag about a perfect merge? Go ahead, you\u2019ve earned it."}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Voiden keeps your workflow transparent, flexible, and 100% yours."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"voiden-terminal",children:"Voiden Terminal"}),"\n",(0,s.jsxs)(t.p,{children:["Voiden comes with a ",(0,s.jsx)(t.strong,{children:"built-in terminal"})," \u2014 so you never have to leave the app to run a command. Whether you need to run a script, check a git status, or do anything else you would normally do in a terminal, you can do it right inside Voiden."]}),"\n",(0,s.jsx)(t.p,{children:"It\u2019s lightweight, fast, and designed to fit naturally into your workflow \u2014 no switching windows, no context loss."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Voiden Terminal",src:n(8682).A+"",width:"2458",height:"1664"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["Voiden also has a ",(0,s.jsx)(t.strong,{children:"CLI"})," \u2014 so you can open projects, files, and directories straight from your terminal. Check out the ",(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.a,{href:"/docs/developer-tools/voiden-cli",children:"Voiden CLI docs"})})," to see what\u2019s possible."]})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"drag--drop-blocks",children:"Drag & Drop Blocks"}),"\n",(0,s.jsx)(t.p,{children:"Your blocks aren't set in stone. Once you've got them in place, you can drag and drop any block to wherever you want it \u2014 reorder your headers, shuffle your body block, whatever feels right. Just grab a block and move it. That's all there is to it."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"drag-and-drop",src:n(407).A+"",width:"2420",height:"1680"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"select--move-multiple-blocks",children:"Select & Move Multiple Blocks"}),"\n",(0,s.jsx)(t.p,{children:"Need to move more than one block at a time? Select a group \u2014 even blocks that aren't next to each other \u2014 and drag, delete, or cancel them together. The selection is temporary and never saved to the file."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Build a selection:"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Ctrl/Cmd+Click"})," a block to add it to the selection. Click it again (still holding Ctrl/Cmd) to remove it \u2014 this is how you grab non-adjacent blocks, one at a time, in any order."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Shift+Click"})," after that to select every block between your last-clicked one and the one you just Shift+Clicked, both ends included. Shift+Click again further down to extend the range."]}),"\n",(0,s.jsx)(t.li,{children:"Combine both: Ctrl/Cmd+Click a few individual blocks, then Shift+Click to add a range on top."}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Selected blocks get a highlighted left border and background tint, so the whole selection is visible at a glance."}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Move it:"})," hover over any block in the selection until its drag grip appears, then drag. The whole group moves together, in the same order it was in \u2014 not just the block you grabbed. The selection clears automatically once the drag completes."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Delete it:"})," press ",(0,s.jsx)(t.strong,{children:"Backspace"})," to remove every selected block in one go."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Cancel it:"})," press ",(0,s.jsx)(t.strong,{children:"Escape"})," to clear the selection without touching the blocks \u2014 or Ctrl/Cmd+Click a selected block again to drop just that one and keep the rest."]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"response-panel",children:"Response Panel"}),"\n",(0,s.jsxs)(t.p,{children:["Every request you send has a dedicated place to show its results. The ",(0,s.jsx)(t.strong,{children:"Response Panel"})," is a right-side panel that displays everything about your request and response \u2014 status code, headers, body, timing, and more \u2014 all in one clean view."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"response",src:n(7386).A+"",width:"2458",height:"1664"})}),"\n",(0,s.jsx)(t.p,{children:"It updates the moment a response comes back, so you always have the latest data right in front of you without any extra steps."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"flexible-layout",children:"Flexible Layout"}),"\n",(0,s.jsxs)(t.p,{children:["The Response Panel isn't locked to the right side. You can move it to the ",(0,s.jsx)(t.strong,{children:"bottom"})," of the editor if that works better for your screen setup \u2014 or keep it docked alongside the built-in terminal so both panels sit together in one place."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"response-panel",src:n(4964).A+"",width:"2458",height:"1664"})}),"\n",(0,s.jsx)(t.p,{children:"It's designed to adapt to how you work, not the other way around."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"extendable-with-tabs",children:"Extendable with Tabs"}),"\n",(0,s.jsxs)(t.p,{children:["The Response Panel doesn't stop at just the response. It comes with built-in tabs like ",(0,s.jsx)(t.strong,{children:"Script Logs"})," and ",(0,s.jsx)(t.strong,{children:"History"})," out of the box \u2014 and can be extended further through plugins. Install a plugin and new tabs appear automatically, giving you more context right where you need it, without cluttering the main editor."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"script-history",src:n(1505).A+"",width:"2458",height:"1664"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"multiple-windows",children:"Multiple Windows"}),"\n",(0,s.jsx)(t.p,{children:"Need more screen space or want to work on two files side by side? No problem. Voiden supports multiple windows so you can spread your work out however feels right."}),"\n",(0,s.jsxs)(t.p,{children:["Just press ",(0,s.jsx)(t.strong,{children:"Cmd + Shift + N"})," (macOS) or ",(0,s.jsx)(t.strong,{children:"Ctrl + Shift + N"})," (Windows/Linux) to open a new window. Each window is fully independent, so you can have different projects, different files, or run requests in parallel without anything getting in the way."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"multiple-window",src:n(1894).A+"",width:"2446",height:"1642"})}),"\n",(0,s.jsxs)(t.p,{children:["When you're done with a window, closing it is just as easy. Head to the ",(0,s.jsx)(t.strong,{children:"hamburger menu"})," in the top left, go to ",(0,s.jsx)(t.strong,{children:"File"}),", and hit ",(0,s.jsx)(t.strong,{children:"Close Window"}),". That's all there is to it."]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"ready-to-get-started",children:"Ready to get started?"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"/docs/getting-started-section/getting-started/installation",children:(0,s.jsx)(t.strong,{children:"Install Voiden"})}),"\nto set up Voiden on your system and start building."]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}}
1,4964:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/response-flexible-f175bfc2c38dfb20e359b655b8fdb0d4.gif"},7386:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/response-panel-cd128e456737d044761ca72ead3ab7e9.png"},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>a});var i=n(6540);const s={},o=i.createContext(s);function r(e){const t=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:t},e.children)}},8682:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/terminal-e4d9070fbef9021bc5a6fa801871f6ba.png"},8754:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/git-gui-f4e336b419131533533f7d0a3f38296e.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.