Quick Start

Create your first HeliosEditor in minutes.

Get Your API Credentials (Required)

To use HeliosEditor, you must get your Client ID and Client Secret. These credentials are required for the editor to function and are automatically generated when you sign up.

How to get your credentials:

Sign up for an account or log in if you already have one
Navigate to your Dashboard
Find your Client Secret in the "Client Secret" section
Your Client ID is your account ID (visible in the dashboard)

Basic Example

Here's a simple example to get you started. The uploadConfig prop is required and must be configured with your credentials:

import React, { useState } from "react";
import HeliosEditor from "helios-editor";
import "helios-editor/dist/editor.css";

function MyApp() {
  const [content, setContent] = useState(
    "<p>Welcome to <strong>HeliosEditor</strong>!</p>"
  );

  // Required configuration (get these from your dashboard)
  const uploadConfig = {
    uploadApiUrl: 'https://api.helioseditor.com/api',
    clientId: 'your-client-id', // Get from dashboard
    clientSecret: 'your-client-secret' // Get from dashboard
  };

  return (
    <HeliosEditor
      value={content}
      onChange={setContent}
      uploadConfig={uploadConfig}
      placeholder="Start typing..."
    />
  );
}

export default MyApp;

Important: The uploadConfig prop is required. You must sign up and get your credentials from the dashboard to use HeliosEditor.

Step-by-Step Guide

1Get Your Credentials (Required)

You must sign up and get your Client ID and Client Secret from the dashboard. These credentials are required for the editor to function.

2Import the Component

import HeliosEditor from "helios-editor";
import "helios-editor/dist/editor.css";

3Set Up State

const [content, setContent] = useState("");

4Configure Upload (Required)

const uploadConfig = {
  uploadApiUrl: 'https://api.helioseditor.com/api',
  clientId: 'your-client-id', // Get from dashboard
  clientSecret: 'your-client-secret' // Get from dashboard
};

5Add the Editor

<HeliosEditor
  value={content}
  onChange={setContent}
  uploadConfig={uploadConfig}
  placeholder="Start typing..."
/>

Standalone Implementation

For standalone implementation, wrap your editor with the provided CSS classes. Remember to include the required uploadConfig:

function MyEditor() {
  const [content, setContent] = useState("");

  // Required configuration
  const uploadConfig = {
    uploadApiUrl: 'https://api.helioseditor.com/api',
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret'
  };

  return (
    <div className="dz-editor-container dz-editor-reset">
      <HeliosEditor
        value={content}
        onChange={setContent}
        uploadConfig={uploadConfig}
        placeholder="Start typing..."
      />
    </div>
  );
}

Note: The standalone CSS includes proper button styling, enhanced dropdown components, responsive design, and theme customization support.