Technical Documentation: OpenSignLabs/OpenSign

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

[](https://www.opensignlabs.com)

Table of Contents Copy Section

1. Introduction
2. Features
3. Installation
4. Usage
5. Contribution Guidelines
6. License
7. Acknowledgments

Please star ⭐ the repo to support us! 😀

Introduction Copy Section

Welcome to OpenSign, the premier open source docusign alternative - document e-signing solution designed to provide a secure, reliable and free alternative to commercial esign platforms like DocuSign, PandaDoc, SignNow, Adobe Sign, Smartwaiver, SignRequest, HelloSign & Zoho sign. Our mission is to democratize the document signing process, making it accessible and straightforward for everyone.

Features Copy Section

• Secure PDF E-Signing: With the help of robust encryption algorithms, OpenSign™ ensures maximum security, privacy & compatibility. Now sign unlimited documents even on the cloud hosted free version of OpenSign.
• Annotate Documents: OpenSign™ allows you to annotate PDF documents with an advanced signing pad that allows hand drawn signatures, uploaded images, typed signatures & saved signatures for the simplest open source document signing experience ever.
• User-Friendly Interface: OpenSign™ was built while keeping Intuitive design in mind for ease of use. Features like "Sign yourself", "Templates", "One click signatures" and "OpenSign™ Drive" makes it stand out of the crowd and even makes it better than a lot of so-called industry leaders. OpenSign intends to provide the best document signing experience in the open source ecosystem.
• Multi-signer Support: OpenSign's ability to invite multiple signers for signing along with the ability to invite by sharing signing links & being able to enforce signing in a sequence makes it the only open source solution that is fully loaded and allows it to compete head-to-head with established players in e-signature space.
• Email Unique Code(OTP) verification support for guest signers: With OpenSign™, your documents are fully secure even when being signed by guest users. Guest signers can only sign the document after entering a unique code sent to their email address. 
• "Expiring Docs" & "Rejection": You can set documents to expire after certain number of days after which nobody will be able to sign. Not just this, OpenSign™ also allows signers to reject signing a document with a reason that will be promptly shared with the sender.
• Beautiful email templates: All document signing invitations, completion notifications & reminders are formatted using great looking email templates. Not just this, you are even allowed to customise the email templates making your free document signing invitations look the way you always wanted them to be.
• PDF Template Creation: OpenSign™ allows you to create and store PDF document templates for repeated use thereby saving you a lot of time & collect e-signatures seamlessly.
• OpenSign™ Drive: It is a centralised secure vault for your digital documents that makes storing, signing, organizing, sharing & archieving your docs a breeze.
• Audit Trails & completion certificate: Being a security focused solution, OpenSign™ makes it a top priority to save detailed logs for tracking document activities along with time-stamps, IP addresses, email IDs & phone numbers. A completion certificate is generated as soon as document is completed which contains all the document related logs for added safety.
• API Support: OpenSign™ API allows seamless integration into existing systems and software. You can generate an API key from the app and refer the official API docs to start integrating it in your existing applications.
• Integrations: The open source document signing experience becomes even more seamless because of integrations with various Cloud storage systems, CRMs & enterprise platforms. We also have a Zapier integration that allows you to integrate it with virtually any application.

Deploy Copy Section

Note: The default MongoDB instance used in deployment is not persistant and will be cleared on every restart. To retain your data, configure and supply your own MongoDB connection URL.

DigitalOcean

Docker

The simplest way to install OpenSign on your own server is using official docker images by running the following command -

Command for linux/MacOS

export HOST_URL=https://opensign.yourdomain.com && curl --remote-name-all https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev && mv .env.local_dev .env.prod && docker compose up --force-recreate

Command for Windows (Powershell)

$env:HOST_URL="https://opensign.yourdomain.com"; Invoke-WebRequest -Uri https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml -OutFile docker-compose.yml; Invoke-WebRequest -Uri https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile -OutFile Caddyfile; Invoke-WebRequest -Uri https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev -OutFile .env.local_dev; Rename-Item -Path .env.local_dev -NewName .env.prod; docker compose up --force-recreate

Command for Windows (CMD/Terminal)

set HOST_URL=https://opensign.yourdomain.com && curl -O https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml && curl -O https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile && curl -O https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev && rename .env.local_dev .env.prod && docker compose up --force-recreate

Make sure that you have Docker and git installed before you run this command -

Please refer to the Installation Guide for detailed instructions on how to install OpenSign on your system.

Usage Copy Section

For comprehensive guidelines on how to use OpenSign™, please consult our User Manual.

Contribution Guidelines Copy Section

We welcome contributions from the open-source community. For more information on how to contribute, please read our Contribution Guidelines.

License Copy Section

OpenSign is licensed under the AGPL-3 License. For more details, see the LICENSE file.

Acknowledgments Copy Section

We would like to thank all our contributors and users for their support and feedback. Special thanks to OpenSignLabs for spearheading this initiative.

Contributors Copy Chapter

This project is tested with BrowserStack.

Overview (`apps/OpenSign/README.md`) Copy Section

Open Sign

Open source is true platform to sign pdf with digital signature

Available Scripts Copy Chapter

In the project directory, you can run:

`npm start` Copy Section

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

`npm run build` Copy Section

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Apps OpenSign Docs DARK MODE USAGE (`apps/OpenSign/docs/DARK_MODE_USAGE.md`) Copy Section

Tailwind Dark Mode Usage Guide

Overview Copy Chapter

This guide shows how to use the new Tailwind utilities for better dark mode visibility in OpenSign.

Button Styling Copy Chapter

VS Code-style Disabled Buttons Copy Section

// Option 1: Direct VS Code styling
<button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
  Disabled Button
</button>

// Option 2: Themed disabled styling
<button className="op-btn btn-themed-disabled">
  Themed Button
</button>

// Option 3: Conditional styling
<button 
  className={`op-btn op-btn-primary ${isDisabled ? 'op-btn-vscode-disabled' : ''}`}
  disabled={isDisabled}
>
  Dynamic Button
</button>

Icon Styling Copy Chapter

Theme-aware Icons Copy Section

// Better visibility in dark mode
<i className="fa-light fa-folder icon-improved"></i>

// Muted but still visible
<i className="fa-light fa-plus icon-muted"></i>

// Disabled state
<i className="fa-light fa-trash icon-disabled"></i>

CSS Variable Approach Copy Section

// Using CSS variables
<i className="fa-light fa-search icon-themed"></i>
<i className="fa-light fa-settings icon-themed-muted"></i>

// Inline styles with CSS variables
<i 
  className="fa-light fa-plus"
  style={{ color: 'var(--icon-color)' }}
/>

Legacy JavaScript Function (Still Supported) Copy Section

// Existing approach - still works
<i 
  className="fa-light fa-plus"
  style={{ color: getThemeIconColor() }}
/>

Text Styling Copy Chapter

Improved Gray Text Copy Section

// These automatically improve in dark mode
<span className="text-gray-500">More visible in dark mode</span>
<span className="text-gray-400">Muted but readable</span>
<span className="text-gray-600">Clear text</span>

Complete Examples Copy Chapter

Toolbar with Better Visibility Copy Section

const Toolbar = () => (
  <div className="flex space-x-2 p-2">
    <button className="p-2 hover:bg-gray-200 rounded">
      <i className="fa-light fa-plus icon-improved"></i>
    </button>
    <button className="p-2 hover:bg-gray-200 rounded" disabled>
      <i className="fa-light fa-trash icon-disabled"></i>
    </button>
    <button className="p-2 hover:bg-gray-200 rounded">
      <i className="fa-light fa-edit icon-improved"></i>
    </button>
  </div>
);

Form with Disabled States Copy Section

const Form = ({ isSubmitting }) => (
  <form>
    <input className="op-input" />
    <button 
      className={`op-btn op-btn-primary ${isSubmitting ? 'op-btn-vscode-disabled' : ''}`}
      disabled={isSubmitting}
    >
      {isSubmitting ? 'Submitting...' : 'Submit'}
    </button>
  </form>
);

React-Tour and Tooltip Dark Mode Support Copy Chapter

React-Tour Modals Copy Section

The react-tour modals now automatically support dark mode with VS Code-inspired styling:

// These components automatically get dark mode styling
<Tour
  onRequestClose={closeTour}
  steps={tourConfig}
  isOpen={isOpen}
  rounded={5}
/>

ReactTooltip Components Copy Section

All ReactTooltip instances now support dark mode:

// Automatically styled for dark mode
<ReactTooltip id="my-tooltip" className="z-[999]">
  <div className="max-w-[200px]">
    <p>Tooltip content</p>
  </div>
</ReactTooltip>

HoverCard Balloon UI Copy Section

The balloon tooltips in OpenSign Drive now properly support dark mode:

// These automatically get dark styling in dark mode
<HoverCard>
  <HoverCardContent>
    Document information
  </HoverCardContent>
</HoverCard>

Dark Mode Features Added Copy Chapter

1. **React-Tour Modal Styling** Copy Section

• Background: #1F2937 (VS Code modal background)
• Text: #E5E7EB (soft white for readability)
• Borders: #374151 (subtle borders)
• Buttons: VS Code-style primary/secondary buttons

2. **ReactTooltip Styling** Copy Section

• Background: #1F2937 with proper contrast
• Border: #374151 for definition
• Box shadow: Enhanced for dark backgrounds
• Text: #E5E7EB for optimal readability

3. **HoverCard Balloon UI** Copy Section

• Background: #1F2937 (matches VS Code)
• Text: #E5E7EB for readability
• Arrow: Automatically matches background color
• Enhanced shadows for dark backgrounds

4. **React-Datepicker Support** Copy Section

• Calendar background: #1F2937
• Selected dates: VS Code blue (#007ACC)
• Hover states: Proper contrast ratios
• Navigation arrows: Themed appropriately

CSS Classes Reference Copy Chapter

Migration Guide Copy Chapter

From JavaScript Function to Tailwind Copy Section

// Before
<i style={{ color: getThemeIconColor() }} className="fa-light fa-plus" />

// After
<i className="fa-light fa-plus icon-improved" />

From Hardcoded Colors to Theme-aware Copy Section

// Before
<i className="fa-light fa-plus text-gray-500" />

// After (automatic improvement)
<i className="fa-light fa-plus text-gray-500" />
// OR explicitly
<i className="fa-light fa-plus icon-improved" />

Migration Notes Copy Chapter

All existing tooltip and tour components will automatically inherit the new dark mode styling when the theme is set to opensigndark. No code changes required for existing implementations.

--- METRICS ---

• Files Extracted: 3
• Estimated Token Budget: ~5976 tokens
• Canonical Reference: https://codewiki.google/github.com/OpenSignLabs/OpenSign