---
title: Basic Example
---

import * as styles from './basic.module.scss'

<div className={styles.container}>
  <div
    id="toolbar-container"
    style={{
      borderTop: '1px solid #ccc',
      borderLeft: '1px solid #ccc',
      borderRight: '1px solid #ccc',
      padding: 10,
    }}
  >
    <select className="ql-font" title="Font" defaultValue="sans-serif">
      <option value="sans-serif">Sans Serif</option>
      <option value="serif">Serif</option>
      <option value="monospace">Monospace</option>
    </select>
    <select className="ql-size" title="Size" defaultValue="normal">
      <option value="small">Small</option>
      <option value="normal">Normal</option>
      <option value="large">Large</option>
      <option value="huge">Huge</option>
    </select>
    <select className="ql-color" title="Text Color" defaultValue="black">
      <option value="white">White</option>
      <option value="black">Black</option>
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="yellow">Yellow</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </select>
    <select className="ql-background" title="Background Color" defaultValue="white">
      <option value="white">White</option>
      <option value="black">Black</option>
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="yellow">Yellow</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </select>
    <select className="ql-align" title="Text Alignment" defaultValue="left">
      <option value="left">Left</option>
      <option value="center">Center</option>
      <option value="right">Right</option>
      <option value="justify">Justify</option>
    </select>
    <button className="ql-bold" title="Bold">Bold</button>
    <button className="ql-italic" title="Italic">Italic</button>
    <button className="ql-underline" title="Underline">Under</button>
    <button className="ql-strike" title="Strikethrough">Strike</button>
    <button className="ql-link" title="Link">Link</button>
    <button className="ql-image" title="Image">Image</button>
    <button className="ql-list" title="Bullet" value="bullet">Bullet</button>
    <button className="ql-list" title="List" value="ordered">List</button>
  </div>
  <Editor
    style={{
      border: '1px solid #ccc',
      height: 250,
    }}
    config={{
      debug: 'info',
      modules: {
        toolbar: '#toolbar-container',
      },
    }}
  />
</div>