Live Preview

                
            
Prompt Elements
  • {{ elementLabel(el) }}
Element Properties
Appearance
Global Settings
Import Existing PS1
Preview Background
Generated PS1

            
        

A shell prompt shows live context such as user, host, and working directory each time a command completes. When you tailor that prompt, you notice critical details faster and avoid mistakes like typing destructive commands in the wrong directory. PS1, the Bash variable controlling prompt text, accepts escape sequences that can be verbose and difficult to remember.

A drag-and-drop interface lets you assemble tokens representing common context elements, apply foreground or background colours, and preview the result against a chosen terminal background. The generator automatically wraps each token in the required ANSI codes and delimiter, giving you a clean PS1 string ready to copy without editing configuration files manually.

Use this builder when you need a distinctive prompt across multiple servers or to share a preset with colleagues for onboarding. Save the generated string in your shell profile to keep customisation persistent between sessions. Review the live preview to catch any token ordering issues before deployment. Test extreme colour combinations on different terminals to ensure readability and accessibility.

Technical Details:

The tool runs entirely in the browser, combining a reactive interface with HTML5 colour pickers and drag-and-drop sorting from a lightweight library. User selections update both the live HTML preview and hidden PS1 string through computed bindings, ensuring immediate feedback without page reloads.

Colour codes are translated into 24-bit ANSI sequences for foreground and background styling, while optional text attributes add bold, underline, or reverse video effects. Clipboard operations use the secure asynchronous API and never transmit data to external servers, protecting private information displayed in your prompt.

Drag-and-Drop Token Builder

Drag tokens such as username or working directory into any sequence; automatic reordering immediately refreshes preview and PS1 output for quick experimentation.

Colour Pickers

Select foreground and background hues with native colour inputs; the ANSI sequence generator translates values into 24-bit codes compatible with modern terminal emulators.

Attribute Toggles

Enable bold, dim, italic, underline, blink, or reverse effects through inline checkboxes; the preview reflects attribute stacking in real time.

Live Preview Pane

View an exact representation of your prompt against any background colour to validate contrast, layout, and multi-line configurations before copying.

Import Existing PS1

Paste an existing PS1 string to parse tokens automatically; the interface reconstructs each element so you can tweak colours and positions without retyping.

Clipboard Copy Buttons

Copy either the raw PS1 string or preview text with a single click; the button provides instant feedback and resets after 1.5 seconds.

Step-by-Step Guide:

Follow these steps to craft and apply your customised prompt.

  1. Click a token button in the Prompt Elements panel such as Username to insert it.
  2. Drag the beside each entry to reorder tokens.
  3. Select a token to open Element Properties and choose foreground and background colours.
  4. Toggle style attributes like Bold or Underline to enhance visibility.
  5. Expand Advanced and edit Prefix, Suffix, or Delimiter for additional control.
  6. Review Live Preview and press Copy under Generated PS1 to copy the string.

FAQ:

Answers to common questions about prompt customisation and tool behaviour.

Why do I see \e codes?

Wrap PS1 in single quotes so Bash interprets escape sequences correctly.

How can I reset the design?

Refresh the page or remove tokens until the list empties, then start adding again.

Is my data stored?

No. All processing happens locally; nothing leaves your browser.

Will colours work in all terminals?

Most modern emulators support 24-bit colour; legacy systems may reduce accuracy.

Can I include Git branch detection?

Yes. Add the Git Branch token and ensure parse_git_branch exists in your shell configuration.

Troubleshooting:

Resolve common issues when applying the generated prompt.

  • Prompt prints on a new line only – remove unintended \n tokens from the list.
  • Colours appear wrong – check terminal colour-profile settings and disable safe-mode.
  • Copy button fails – grant clipboard permission or copy manually from the PS1 output box.
  • Git branch never shows – ensure repository has an active branch and helper function exists.
  • Symbols display as question marks – switch to a font supporting Unicode glyphs.

Advanced Tips:

Elevate your prompt design with expert techniques.

  • Use conditional commands in PS1 to hide long paths on narrow windows.
  • Set PROMPT_COMMAND to update Git status before each prompt render.
  • Combine ANSI reset with newline tokens to separate long command outputs visually.
  • Store colour variables in your profile for quick global theme changes.
  • Create host-specific prefixes to differentiate production servers at a glance.

Glossary:

Key terms used throughout this document.

PS1
Primary prompt string variable in Bash.
ANSI
Standard byte sequences controlling colour and text style.
Token
Placeholder representing dynamic prompt content.
Delimiter
Character or string separating prompt tokens.
Clipboard API
Browser interface for programmatic copy-and-paste operations.
Embed this tool into your website using the following code: