Base64 JavaScript Playground

Interactive playground for testing use-base64 React hook and encoding functions with real-time preview.

Controls

Input Text

Base64 Variant

Standard+/URL-safe-_

Padding

Preserve=Strip=

Line Wrapping

Enable

Unicode Normalization

Quick Examples

Output

useBase64() Result

SGVsbG8sIHdvcmxkIQ==

encodeBase64() Result

SGVsbG8sIHdvcmxkIQ==

Generated Code

React Hook Usage

const encoded = useBase64("Hello, world!")

Function Usage

const encoded = encodeBase64("Hello, world!")

React Snippet

import { useState } from "react"
import { useBase64, encodeBase64 } from "use-base64"

export default function Example() {
  const [text, setText] = useState("Hello, world!")
  const encoded = useBase64(text, { variant: "url", padding: "strip", wrap: false })
  // or: const encoded2 = encodeBase64(text, { variant: "standard" })

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <pre>{encoded}</pre>
    </div>
  )
}

Related Tools

Package Links

View on NPM Source Code

Installation

npm install use-base64

yarn add use-base64

pnpm add use-base64

bun add use-base64

Online Base64 Encoder/Decoder

Simple web-based tool for quick Base64 encoding and decoding without any installation required.

Web-basedNo InstallQuick Access

More Tools Coming Soon

We're working on additional Base64 tools and utilities. Stay tuned!