Offline-first certificate authoring, generation, management, and verification platform built with Flutter.
Certificate Studio is a cross-platform application for institutions, academies, training centers, educational organizations, and other certificate issuers to design certificate templates, import recipient data, generate certificates in batches, digitally sign them, export them in multiple formats, and verify their authenticity and integrity.
The application is designed around an offline-first architecture, allowing certificate projects, templates, fonts, data, cryptographic identities, generated certificates, and verification operations to be managed locally without requiring a permanent backend connection.
Creating certificates for a large number of recipients is often handled through disconnected tools:
- Design software for creating the certificate.
- Spreadsheet software for managing recipients.
- Scripts or manual work for inserting names and information.
- PDF/image tools for exporting certificates.
- Separate storage for generated files.
- Manual sharing through messaging applications.
- External or custom systems for certificate verification.
This creates repetitive work, increases the possibility of human error, makes template changes difficult, and provides little guarantee that a generated certificate has not been modified.
Certificate Studio combines these operations into a single workflow:
Certificate Template
+
Recipient Data
+
Visual Layout
+
Fonts & Signatures
+
Security Metadata
↓
Certificate Generation
↓
PDF + High-Resolution Image
↓
Certificate Library
↓
Sharing / Export / Verification
The project is intended to provide a complete certificate production workflow while keeping the authoring experience simple for non-technical users.
The central unit of the application is a Certificate Project.
A project contains everything required to reproduce a certificate design and generate certificates from recipient data.
A project may contain:
- Project information
- Institution information
- Certificate template
- Recipient/record data
- Data-column mappings
- Certificate fields
- Field positions and dimensions
- Typography configuration
- Project fonts
- Signatures and stamps
- QR-code configuration
- Certificate identifiers
- Security configuration
- Export configuration
- Filename rules
- Verification configuration
- Project-specific cryptographic information
Generated certificate files are treated as project outputs rather than project resources.
Therefore, exporting a project does not need to include previously generated certificates unless an explicit future archival/export feature is introduced.
Certificate Studio aims to provide:
- Simple certificate creation
- Reusable certificate templates
- Batch certificate generation
- Excel and clipboard data import
- Precise visual positioning
- Custom font management
- Digital signature support
- Cryptographic integrity verification
- QR-based verification
- Offline-first operation
- Cross-platform support
- Portable project files
- Centralized certificate management
- Easy sharing and export
- A foundation for future institutional certificate infrastructure
Projects provide an isolated workspace for a specific certificate production task.
Examples:
- Programming Course 2026
- English Training Program
- Graduation Certificates
- Workshop Participation
- Professional Training
- Academic Achievement
- Custom institutional certificates
Each project can have its own:
- Template
- Data
- Design
- Fonts
- Signatures
- Security identity
- Verification metadata
- Export configuration
Projects can be created, opened, duplicated, renamed, exported, imported, and deleted.
Certificate Studio provides a reusable template library.
Users can:
- Import certificate backgrounds
- Store templates locally
- Preview templates
- Reuse templates across projects
- Delete unused templates
- Select an existing template when creating a project
Supported image formats may include:
- PNG
- JPEG/JPG
- WebP
Additional formats can be supported by the rendering layer where appropriate.
A template acts as the visual foundation of the certificate.
The final certificate is constructed from:
Template
+
Dynamic Fields
+
Typography
+
Images
+
Signatures
+
QR Code
+
Verification Metadata
The Certificate Designer is the visual authoring environment of the application.
It allows users to position and configure dynamic certificate elements directly on the certificate canvas.
The design environment is inspired by common visual authoring tools while remaining focused specifically on certificate creation.
Users can add:
- Text
- Data fields
- Images
- Signatures
- Stamps
- QR codes
- Other supported visual elements
Each field can have independent configuration.
Possible properties include:
- Data source
- Position
- Width
- Height
- Font
- Font size
- Font weight
- Font style
- Text color
- Openness/opacity
- Alignment
- Text direction
- Overflow behavior
- Visibility
- Layer order
- Lock state
The editor can provide:
- Zoom
- Grid
- Rulers
- Snap-to-grid
- Alignment guides
- Center guides
- Safe margins
- Layer management
- Copy/paste
- Duplicate
- Undo/redo
- Autosave
Certificate fields can be connected directly to imported recipient data.
For example, an Excel file may contain:
Record Name
Course
Grade
Date
Instructor
Phone
The user can place:
Record Name
on the certificate.
During generation, the field is automatically replaced with the corresponding value for each recipient.
Conceptually:
Excel Column
↓
Data Mapping
↓
Certificate Field
↓
Rendered Certificate
The user does not need to manually write internal placeholder syntax.
Certificate Studio supports recipient data from spreadsheets.
Users can:
- Import Excel files
- Paste copied spreadsheet tables
- Preview imported data
- Validate rows and columns
- Edit data when necessary
- Map columns to certificate fields
- Search and filter records
- Detect missing required values
Example:
| Record Name | Course | Grade | Date |
|--------------|--------------|-------|------------|
| Ahmed Ali | Flutter | A+ | 2026-09-01 |
| Mohammed Ali | Laravel | A | 2026-09-01 |
| Ali Hassan | Programming | B+ | 2026-09-01 |
The application normalizes the imported data into a common internal representation before certificate generation.
The mapping layer connects imported data with certificate fields.
For example:
Record Name → Recipient Name
Course → Course Title
Grade → Final Grade
Date → Completion Date
Mapping validation occurs before generation.
The system should identify issues such as:
- Missing required columns
- Unmapped required fields
- Invalid values
- Missing recipient names
- Unsupported data types
- Invalid dates
- Duplicate identifiers where applicable
Certificate typography is an important part of certificate design.
The application therefore provides a dedicated font library.
Users can:
- Import custom fonts
- Preview fonts
- Register fonts for a project
- Reuse fonts
- Remove unused fonts
- Store fonts with the project
Project-specific font storage is important because a certificate design must remain reproducible when a project is moved to another device.
A project should not silently depend on a font that exists only on the original computer.
Conceptually:
Project
├── Template
├── Fonts
├── Layout
├── Data Mapping
└── Configuration
Certificate Studio supports visual signatures and stamps as certificate elements.
A signature can be:
- Imported
- Positioned
- Resized
- Configured
- Reused
The system distinguishes between:
An image representing a physical/digital signature.
A cryptographic operation proving that the certificate was issued by the configured signing identity and has not been modified after signing.
These are separate concepts and can coexist on the same certificate.
Certificate Studio is designed around cryptographic authenticity and integrity.
The security architecture can provide:
Institution Identity
↓
Private Signing Key
↓
Certificate Signature
↓
Verification
↓
Public Verification Key
The cryptographic layer is responsible for operations such as:
- Key generation
- Key storage
- Key protection
- Key rotation
- Hash generation
- Digital signatures
- Signature verification
- Encryption where confidentiality is required
- Secure serialization of cryptographic data
Cryptographic implementation details are isolated from the UI and certificate-generation workflow.
Each generated certificate can contain integrity information.
The system can calculate a cryptographic hash over the relevant certificate content.
During verification:
Certificate
↓
Recalculate Hash
↓
Compare
↓
Verify Digital Signature
↓
Authenticity Result
This allows the application to distinguish between:
- A valid certificate
- A modified certificate
- An invalid signature
- An unknown issuer
- An unsupported certificate format
- An unverifiable certificate
Certificates can contain a QR code containing verification information.
The QR code may represent information such as:
- Certificate ID
- Institution ID
- Project ID
- Verification metadata
- Integrity information
- Signature-related information
The QR code is generated automatically from the certificate's verification configuration.
Users should not need to manually construct QR payloads.
Verification is an independent feature of the application.
A user can verify a certificate using one of several methods:
PDF
↓
Image
↓
QR Code
↓
Certificate ID
The verification screen can provide:
✓ VERIFIED
Certificate ID
CERT-2026-00042
Issuer
Example Institution
Recipient
Ahmed Ali
Integrity
✓ Valid
Digital Signature
✓ Valid
Status
Authentic
For an altered certificate:
✕ INVALID
Certificate integrity verification failed.
The certificate may have been modified
after it was issued.
Verification should be possible offline whenever all required verification information and public cryptographic material are available locally.
After the project has been configured, certificates can be generated individually or in batches.
Generation combines:
Template
+
Layout
+
Recipient Data
+
Fonts
+
Images
+
Signatures
+
QR Code
+
Security Metadata
The rendering pipeline produces the final certificate.
Supported output targets include:
- High-resolution image
The rendering engine is separated from the Flutter UI so that certificate generation remains reusable and testable.
Users can generate certificates for an entire imported dataset.
Example:
42 recipients
↓
Generate
↓
42 certificates
The generation process provides progress information:
Generating Certificates
████████████████░░░░ 80%
34 / 42
The system should support:
- Progress reporting
- Successful results
- Failed records
- Error details
- Retry
- Partial success
- Regeneration
A single invalid record should not necessarily invalidate an entire batch.
Generated certificates are managed through a dedicated certificate library.
Users can:
- Browse certificates
- Search certificates
- Filter certificates
- View certificate metadata
- Preview certificates
- Open generated files
- Share certificates
- Export certificates
- Regenerate certificates
- Delete generated outputs
Certificate metadata may include:
- Certificate ID
- Recipient
- Project
- Generation date
- Output formats
- Verification status
- Generation status
Certificate filenames can be generated dynamically.
Examples:
{record_name}.pdf
{record_name}_{course}.pdf
{course}_{record_name}.pdf
The filename engine resolves placeholders from project data.
The same mechanism can be used for image output.
Certificate Studio supports several export scenarios.
Record Certificate
├── PDF
└── Image
Certificates
├── Record A
│ ├── certificate.pdf
│ └── certificate.png
│
├── Record B
│ ├── certificate.pdf
│ └── certificate.png
│
└── Record C
├── certificate.pdf
└── certificate.png
The complete result can be packaged into a ZIP archive.
The export configuration can determine whether the output is:
- Flat
- Organized by recipient
- PDF only
- Image only
- PDF + image
Generated certificates can be shared through the operating system's native sharing mechanism.
If a recipient has a phone number in the imported data, the application can provide a convenient WhatsApp sharing action where supported by the platform.
For example:
Recipient
Ahmed Ali
Phone
+967XXXXXXXXX
[ Share ]
[ WhatsApp ]
The application does not assume that a normal WhatsApp client provides unrestricted programmatic message sending. The sharing layer therefore remains abstracted so that future integrations, including official business APIs, can be added without changing the certificate-generation domain.
Certificate Studio supports exporting a complete project into a custom project package.
Possible extension:
.cstudio
or:
.certproject
A project package may contain:
Project Manifest
Template
Fonts
Layout
Field Definitions
Data Mapping
Signatures
Security Configuration
Verification Configuration
Export Configuration
Generated certificate files are intentionally excluded from the normal project package.
This allows a project to be moved between supported devices while preserving its authoring environment.
Example:
Certificate Project
↓
Export
↓
certificate-project.cstudio
↓
Transfer to another device
↓
Import
↓
Continue editing / generating
The package format should be versioned to support future migrations.
Certificate Studio is designed to work primarily with local data.
Core operations should not require an internet connection, including:
- Project creation
- Template management
- Font management
- Data import
- Certificate design
- Certificate generation
- Local certificate storage
- Local verification
- Project export/import
The application uses a local persistence layer with an abstraction that allows different storage implementations for different platforms.
The architecture should not tightly couple the domain layer to a specific database implementation.
The application is built with Flutter with the goal of supporting:
- Windows
- Android
- Linux
- macOS
- iOS
- Web where technically appropriate
Platform-specific capabilities such as:
- File selection
- File system access
- Native sharing
- Clipboard
- Printing
- Storage
- Database implementation
are isolated behind platform abstractions.
The same domain and business logic should remain reusable across platforms.
Certificate Studio uses different interface layouts depending on available screen size.
The designer can use:
Sidebar
+
Canvas
+
Properties Panel
The interface can use:
Collapsible Navigation
+
Canvas
+
Properties Drawer
The interface can use:
Certificate Canvas
+
Bottom Navigation
+
Bottom Sheets
The goal is not to simply scale the desktop interface down, but to provide an appropriate interaction model for each platform.
The main certificate-authoring workflow is:
Create Project
↓
Project Information
↓
Select / Import Template
↓
Import / Paste Recipient Data
↓
Validate Data
↓
Map Data Fields
↓
Design Certificate
↓
Configure Fonts
↓
Configure Signature / Stamp
↓
Configure QR / Verification
↓
Preview
↓
Pre-generation Validation
↓
Generate Certificates
↓
Review Results
↓
Certificate Library
↓
Export / Share
The application should not force the user to repeat this entire sequence after the project has already been created.
Once a project exists, users can directly enter the required workspace:
Project
├── Overview
├── Data
├── Design
├── Preview
├── Generate
├── Certificates
└── Export
Each project provides an overview of its current state.
Example:
Programming Course 2026
Project Readiness
✓ Template
✓ Recipient Data
✓ Field Mapping
✓ Design
✓ Security
42 recipients
0 generation errors
Quick actions can include:
Edit Design
Manage Data
Preview
Generate Certificates
View Certificates
Export Project
This allows users to resume work without remembering where they stopped.
Before generating a batch, the application performs a pre-generation validation stage.
Possible checks include:
✓ Template exists
✓ Recipient data exists
✓ Required mappings exist
✓ Required values are present
✓ Fonts are available
✓ Signatures are available
✓ Certificate layout is valid
✓ Security configuration is valid
✓ Output configuration is valid
Warnings and errors are presented before generation begins.
For example:
⚠ 3 recipients have no phone number.
Phone number is not required for certificate generation.
[ Continue ]
Critical problems prevent generation until they are resolved.
The application is designed around understandable user-facing errors.
Instead of exposing technical exceptions such as:
NullPointerException
DatabaseException
RenderException
the UI should provide actionable messages:
Unable to generate this certificate.
The recipient name is missing.
[ Review Data ]
Batch operations should support partial success:
38 certificates generated
4 certificates failed
[ View Successful ]
[ Review Failures ]
Security-related operations are isolated into dedicated components.
Conceptually:
certificate_crypto
│
├── keys
├── hashing
├── signing
├── encryption
└── secure formats
The application separates:
Protecting sensitive information from unauthorized access.
Detecting changes to certificate data.
Proving that a certificate was produced by the expected issuer.
Encryption alone is not considered proof of certificate authenticity.
Digital signatures and trusted public verification keys are used for authenticity, while cryptographic hashes support integrity validation.
Key rotation and secure key storage are part of the security architecture.
The project may include a Python cryptographic package as a reference implementation and interoperability layer.
The Python implementation can be used for:
- Cryptographic development
- Protocol definition
- Test vectors
- Interoperability testing
- Development tools
- Automated validation
- Cross-language compatibility testing
The Flutter application should not depend on a Python runtime for normal mobile or web execution.
Instead:
Python Reference Implementation
↕
Protocol / Test Vectors
↕
Flutter / Dart Implementation
Both implementations should produce compatible results where interoperability is required.
The application follows a modular architecture designed to keep UI, business logic, storage, rendering, cryptography, and platform services separated.
High-level structure:
Flutter Application
│
├── Presentation
│
├── Domain
│
└── Data
│
▼
Application Services
│
┌───────┼────────┐
▼ ▼ ▼
Renderer Crypto Storage
│ │ │
▼ ▼ ▼
PDF/ Keys/ SQLCipher /
Image Hash Local DB
Sign
Reusable technical functionality is separated from UI features.
packages/
├── certificate_core/
├── certificate_crypto/
├── certificate_renderer/
├── certificate_excel/
├── certificate_verifier/
└── certificate_project/
Contains shared domain primitives and reusable certificate-related models.
Handles:
- Keys
- Hashing
- Digital signatures
- Encryption
- Secure formats
- Cryptographic utilities
Transforms certificate definitions into:
- High-resolution images
Handles:
- Excel parsing
- Spreadsheet normalization
- Clipboard table parsing
- Data validation
Handles certificate verification from:
- Images
- QR codes
- Certificate IDs
- Cryptographic metadata
Handles:
- Project package creation
- Project import/export
- Manifest
- Versioning
- Validation
- Migration
The Flutter application is organized around user-facing features:
lib/
├── config/
├── core/
├── features/
│ ├── app/
│ ├── institution/
│ ├── projects/
│ ├── templates/
│ ├── certificate_designer/
│ ├── fonts/
│ ├── data_import/
│ ├── field_mapping/
│ ├── signatures/
│ ├── certificate_generation/
│ ├── certificates/
│ ├── export/
│ ├── project_package/
│ ├── verification/
│ ├── records/
│ ├── sharing/
│ └── settings/
├── routes/
└── shared/
Each major feature follows a consistent separation between:
data/
domain/
presentation/
where appropriate.
The primary application stack includes:
| Layer | Technology |
|---|---|
| Application | Flutter / Dart |
| Architecture | Modular Clean Architecture |
| State Management | BLoC / Cubit |
| Local Persistence | SQLCipher-based abstraction |
| Spreadsheet Import | Excel-compatible parser |
| Rendering | Dedicated certificate rendering layer |
| Cryptography | Dedicated cryptographic package |
| Project Packaging | Versioned custom project format |
| Mobile/Desktop | Flutter |
| Web | Flutter Web where supported |
| Reference Crypto | Python |
Specific libraries may change during development as platform compatibility, performance, and security requirements are evaluated.
The local persistence layer stores information such as:
Institutions
Projects
Templates
Fonts
Fields
Mappings
Signatures
Recipients
Certificates
Generation Jobs
Export Jobs
Verification Records
Application Settings
Database access is abstracted from the domain layer.
This allows the storage implementation to evolve without changing business logic.
A conceptual project can be represented as:
Project
│
├── Identity
├── Institution
├── Template
├── Fonts
├── Fields
├── Data Mapping
├── Signatures
├── QR Configuration
├── Security Configuration
├── Export Configuration
└── Verification Configuration
Generated certificates are associated with the project but remain generated outputs rather than core design resources.
A certificate follows a controlled lifecycle:
Draft
↓
Configured
↓
Validated
↓
Generated
↓
Signed
↓
Stored
↓
Exported / Shared
↓
Verified
If a certificate is regenerated because its design or source data changed, the application can create a new certificate version or generation result according to the project's lifecycle policy.
Certificate Studio follows several core design principles.
Complex internal systems should produce simple user interactions.
Templates, fonts, signatures, projects, and layouts should be reusable.
Core authoring and generation functionality should remain available without an internet connection.
Security should be integrated into the certificate lifecycle rather than added as an afterthought.
UI, domain logic, storage, rendering, cryptography, and platform services should remain independently testable.
Projects should be transferable between supported devices.
A project should contain the resources required to reproduce its certificate design.
The architecture should allow future backend synchronization, institutional APIs, cloud verification, and additional certificate formats without requiring a complete rewrite.
The initial system is intentionally local and offline-first, but the architecture can later support:
- Cloud synchronization
- Institutional accounts
- Multi-user collaboration
- Central certificate registries
- Online verification
- Public verification portals
- Certificate revocation
- Certificate expiration
- Institutional APIs
- QR verification services
- Official messaging integrations
- Cloud backup
- Organization-level certificate management
- Certificate analytics
- Audit logs
- Hardware-backed key storage
- Additional document formats
These are future capabilities and are not required for the core offline application.
The initial project is not intended to become:
- A complete ERP system
- A full spreadsheet replacement
- A general-purpose graphic design application
- A general document editor
- A full learning-management system
- A messaging platform
- A mandatory cloud service
The application remains focused on certificate authoring, generation, management, security, and verification.
A typical institution workflow can be:
1. Create "Flutter Training 2026" project.
2. Select an existing certificate template.
3. Import an Excel spreadsheet containing 42 records.
4. Validate the imported data.
5. Add the Record Name field to the certificate.
6. Add Course, Grade, and Completion Date fields.
7. Configure fonts and typography.
8. Add an institutional signature.
9. Add a verification QR code.
10. Preview several records.
11. Run pre-generation validation.
12. Generate all certificates.
13. Review generation results.
14. Store certificates in the certificate library.
15. Export PDFs and high-resolution images.
16. Create a ZIP archive.
17. Share certificates with recipients.
18. Verify certificates later using the PDF,
image, QR code, or certificate ID.
Certificate Studio is under active development.
The architecture and product design are being developed incrementally, with particular attention to:
- Cross-platform compatibility
- Offline operation
- Certificate rendering quality
- Cryptographic correctness
- Project portability
- User experience
- Maintainability
- Testability
- Future extensibility
Features may evolve during implementation while preserving the core project architecture and workflow.
A high-level repository structure is:
certificate-studio/
│
├── lib/
│
├── packages/
│ ├── certificate_core/
│ ├── certificate_crypto/
│ ├── certificate_renderer/
│ ├── certificate_excel/
│ ├── certificate_verifier/
│ └── certificate_project/
│
├── python/
│ └── certificate_crypto/
│
├── assets/
│ ├── fonts/
│ ├── icons/
│ ├── images/
│ └── templates/
│
├── docs/
│ ├── architecture/
│ ├── security/
│ ├── project-package/
│ ├── certificate-format/
│ └── requirements/
│
├── test/
├── integration_test/
│
├── android/
├── ios/
├── linux/
├── macos/
├── web/
└── windows/
The project is developed with the principle that a certificate should be treated as a structured, reproducible, and verifiable digital artifact rather than simply an image generated from a template.
Conceptually:
Certificate
=
Visual Representation
+
Structured Data
+
Issuer Identity
+
Integrity
+
Verification Information
This makes it possible to move from simple certificate generation toward a more reliable certificate lifecycle without unnecessarily complicating the author's workflow.
The project's license will be defined according to the project's distribution and ownership requirements.
This section provides a comprehensive walkthrough of the user experience from the perspective of a first-time user and a returning user.
A new user opening Certificate Studio for the first time will encounter a carefully designed onboarding sequence that avoids information overload while collecting only what is necessary.
The welcome screen presents a clear value proposition without requiring any configuration. The user sees a single primary action:
Welcome to Certificate Studio
Create, sign, generate and verify
institution-issued certificates offline.
[ Get Started ]
Clicking Get Started leads to the Institution Setup step — the one-time configuration that establishes the organizational identity used for signing all certificates produced with this installation.
The institution setup collects:
- Institution name (displayed on certificates and in verification results)
- Institution ID (auto-generated, used internally for cryptographic identity)
- Logo (optional, used in certificates and the UI)
- Contact information (optional)
The signing key pair is generated automatically in the background. The user never sees raw key material during setup. The status is shown simply as:
Security
Your institution signing identity
will be created locally.
[ Create Institution ]
After setup, the user arrives at the Home screen with a clear invitation to create their first project.
Project creation uses a step-by-step wizard to guide users through the minimum required configuration.
The user enters basic project metadata:
- Project name
- Description (optional)
- Certificate type (Course / Training / Achievement / Participation / Custom)
The UI does not ask for technical configuration at this stage.
The user selects a certificate background image.
Options available:
- Browse the local template library
- Import a new image file (PNG, JPG, WEBP)
- Drag and drop an image directly (on Desktop)
The template acts as the visual foundation of the certificate. Text, fields, signatures, and QR codes are layered on top of the template during design.
The user imports recipient data at project creation or can skip and add it later.
Data entry methods:
- Upload an Excel file (.xlsx)
- Paste a copied spreadsheet table directly
- Skip for now
When data is imported, the application shows an immediate preview:
Imported successfully
42 records
5 columns
0 invalid rows
[ View Data ] [ Edit Data ] [ Continue ]
After the wizard, the user enters the Project Workspace. This workspace persists across sessions. The user can return at any time and jump directly to any section without repeating the wizard.
The workspace is organized as a sidebar navigation with seven sections:
The overview shows the current readiness state of the project:
Programming Course 2026
Project Readiness
✓ Template
✓ Recipient Data (42 records)
✓ Field Mapping
✓ Design
✓ Security
Certificates: 42 generated
Quick Actions
[ Edit Design ] [ Manage Data ] [ Generate Certificates ]
The readiness indicators prevent the user from needing to remember where they stopped. The application always shows the current state of each configuration component.
The Data section provides a live spreadsheet view of all imported recipients. It behaves like a lightweight data table with:
- Search across all columns
- Sort by any column
- Filter by column values
- Edit individual cells
- Add rows manually
- Delete rows
- Validation indicators (missing required values highlighted)
The data table is not a full spreadsheet editor. It is scoped specifically to the kinds of edits needed when preparing certificate data.
The Designer is the most important screen in the application.
It provides a WYSIWYG canvas where users position and configure every dynamic element of the certificate.
The Designer is organized into three panels:
Left Panel — Elements and Layers
The Elements panel provides buttons to add new certificate elements:
- Data Field (connects to an imported data column)
- Static Text (fixed text on every certificate)
- Image (institutional logo, decorative elements)
- Signature (visual signature image)
- QR Code (verification QR code, auto-generated)
The Layers panel shows all elements in stack order and allows reordering by drag and drop.
Center Panel — Certificate Canvas
The canvas displays the certificate template with all positioned elements overlaid.
Canvas tools:
- Zoom in / out (keyboard shortcut and slider)
- Grid overlay (togglable)
- Ruler (horizontal and vertical)
- Snap to grid
- Smart alignment guides (snap to center, edges, and other elements)
- Safe margin guides
Element manipulation on canvas:
- Drag to move
- Corner handles to resize
- Right-click for context menu
- Multi-select with Shift+Click or drag selection box
Right Panel — Properties
The Properties panel is contextual. Its content changes based on what is currently selected:
Nothing selected:
Properties
Select an element to edit its properties.
Data Field selected:
Field: Record Name
Source: Record Name (Excel column)
Font: Cairo
Size: 32
Weight: Bold
Color: #1A1A1A
Align: Center
Direction: Auto (RTL/LTR)
Overflow: Shrink
Position
X: 420 Y: 280
Size
W: 600 H: 80
[ Duplicate ] [ Delete ]
[ Lock ] [ Hide ]
QR Code selected:
QR Code
Content: Certificate Verification (automatic)
Size: 180 x 180
Error correction: High
✓ Include certificate ID
✓ Include verification metadata
Signature selected:
Signature
Image: director_signature.png
Opacity: 100%
Position X / Y
Size W / H
Adding a Data Field — The Core Designer Interaction
The most important Designer interaction is adding a data field connected to imported recipient data.
The user clicks "+ Data Field" and a picker appears:
Add Data Field
Available columns:
● Record Name
○ Course
○ Grade
○ Date
○ Instructor
○ Certificate ID
[ Add Field ]
The user selects "Record Name" and clicks Add Field. A box appears on the canvas at a default position, already connected to the Record Name column. The preview inside the box shows the first record's name.
The user drags the box to the correct position and adjusts size as needed.
Internally:
field.type = data
field.source = record_name_column
No placeholder syntax is visible to the user at any point.
The Preview section renders the complete certificate for a specific recipient, combining the template, all field values, signatures, and QR code.
The user can scroll through recipients:
Preview
Record: [ Ahmed Ali ▼ ]
< Previous 1 / 42 Next >
+----------------------------------+
| |
| CERTIFICATE |
| |
| Ahmed Ali |
| |
| Flutter 2026 |
| |
+----------------------------------+
[ Edit Design ] [ Generate ]
The preview is the primary tool for catching problems before generation:
- Names that are too long for their box
- Incorrect font or alignment for Arabic text
- Missing data in specific rows
- Wrong field positions
The Generate section configures and triggers batch certificate production.
The user sets:
- Output formats (PDF / High-resolution image / both)
- Filename pattern (e.g., {record_name}_{course})
- Export organization (individual files / per-recipient folders / ZIP)
Before generation, the application runs a pre-generation validation:
Pre-generation Check
✓ Template exists
✓ 42 records loaded
✓ All required fields mapped
✓ Fonts available
✓ Signature available
✓ Security keys valid
⚠ 3 records have missing phone numbers
Phone is not required for generation.
[ Generate 42 Certificates ]
During generation, a live progress view is shown:
Generating Certificates
████████████████░░░░ 82%
35 / 42
✓ Ahmed Ali
✓ Mohammed Hassan
✓ Ali Ahmed
⟳ Abdullah Saleh
Estimated remaining: 8 seconds
[ Run in Background ]
Errors are presented per record:
⚠ 2 certificates failed
Ahmed Ali ✓
Mohammed Hassan ✕ Missing date
Ali Ahmed ✓
[ Review Errors ] [ Continue Successful ]
The Certificates section is the certificate library for this project. All generated certificates appear here with their current status.
Certificates — 42 generated
Search: [ ________________ ]
Filter: [ All ] [ Valid ] [ Errors ]
+------------------------------------------------+
| CERT-00001 Ahmed Ali ✓ Ready [Share] |
| CERT-00002 Mohammed ✓ Ready [Share] |
| CERT-00003 Ali Hassan ✓ Ready [Share] |
+------------------------------------------------+
Clicking a certificate opens its detail view:
+----------------------------------+
| |
| Ahmed Ali |
| |
+----------------------------------+
Certificate ID
CERT-2026-00001
Status
✓ Authentic
Security
✓ Digital Signature
✓ Integrity
✓ QR Code
Files
[ PDF ] [ Image ]
[ Share ] [ Export ] [ Regenerate ]
The Export section provides batch export options:
- Export all certificates as individual files
- Export as a structured ZIP archive
- Export the project configuration file (.cstudio)
Verification is a first-class, standalone feature accessible from the main navigation.
Anyone (not just the certificate creator) can verify a certificate using this screen.
Verify Certificate
Drop certificate here
or
[ Select PDF / Image ]
or
[ Scan QR Code ]
or
Certificate ID
[ ________________ ]
[ Verify ]
A valid certificate produces:
✓ VERIFIED
Certificate ID
CERT-2026-00042
Issued by
Al-Noor Academy
Project
Flutter Training 2026
Recipient
Ahmed Ali
Integrity
✓ Valid
Digital Signature
✓ Valid
Status
✓ Authentic
A modified certificate produces:
✕ INVALID
Certificate integrity check failed.
The document may have been modified
after it was issued.
Verification works fully offline when the public key material is available locally. No internet connection is required.
When a recipient has a phone number in their imported data, the application presents a WhatsApp sharing option alongside the standard system share:
Share Certificate
Ahmed Ali
+967XXXXXXXXX
[ System Share ]
[ WhatsApp ]
The WhatsApp integration opens the WhatsApp application with the recipient's phone number and the certificate file pre-attached. The user confirms sending within WhatsApp. The application does not send automatically without user confirmation.
When no phone number is available:
Phone number unavailable
[ Enter number manually ]
[ System Share only ]
A project can be exported to a portable file:
Export Project
This will include:
✓ Template
✓ Fonts
✓ Field layout
✓ Data mapping
✓ Project settings
✓ Security configuration
Generated certificates will NOT be included.
[ Export Project ]
The resulting file (e.g., Flutter_Course_2026.cstudio) can be transferred to another device.
Importing on the other device:
Import Project
Flutter_Course_2026.cstudio
Project: Flutter Training 2026
Template ✓
Fonts ✓
Layout ✓
Mappings ✓
Security ✓
[ Import Project ]
After import, the project is ready for use on the new device without any manual reconfiguration.
The Settings screen is organized by category without overwhelming the user:
Settings
General
├── Language
├── Appearance (Light / Dark)
└── Storage location
Institution
├── Institution Profile
└── Security Keys
Certificates
├── Default export format
├── Default filename pattern
└── Default export organization
Verification
├── Verification settings
└── QR code settings
Fonts
└── Font Library
Advanced
├── Database
├── Encryption
├── Diagnostics
└── Developer Tools
Cryptographic details (key algorithms, key fingerprints, rotation history) are available only under Advanced > Security Keys, not in the main settings flow.
The Certificate Designer supports a professional set of interactions:
Selection
- Single click: select element
- Shift+click: add to selection
- Drag on empty canvas: marquee selection
- Escape: deselect all
Movement
- Drag: move freely
- Arrow keys: move 1px
- Shift+Arrow: move 10px
- Drag with Shift: constrain to horizontal or vertical axis
Resize
- Drag corner handles: free resize
- Drag edge handles: constrain to one axis
- Hold Shift during resize: maintain aspect ratio
Alignment
- Smart guides appear when approaching alignment with other elements
- Alignment toolbar: align left, right, top, bottom, center horizontal, center vertical
- Distribute evenly: horizontal and vertical
Context Menu (Right-click on element)
- Duplicate
- Delete
- Bring to front
- Send to back
- Lock / Unlock
- Hide / Show
| Shortcut | Action |
|---|---|
| Ctrl + S | Save |
| Ctrl + Z | Undo |
| Ctrl + Shift + Z | Redo |
| Ctrl + C | Copy |
| Ctrl + V | Paste |
| Ctrl + D | Duplicate |
| Ctrl + A | Select all |
| Delete | Delete selected |
| Escape | Deselect / Close panel |
| Ctrl + P | Preview |
| Ctrl + G | Generate |
| Ctrl + + | Zoom in |
| Ctrl + - | Zoom out |
| Ctrl + 0 | Fit to window |
| Arrow keys | Move 1px |
| Shift + Arrow | Move 10px |
| Ctrl + [ | Send backward |
| Ctrl + ] | Bring forward |
| Ctrl + Shift + [ | Send to back |
| Ctrl + Shift + ] | Bring to front |
| Zone | Accepted content |
|---|---|
| Home screen | Project files (.cstudio), Excel files (.xlsx) |
| Template library | Image files (PNG, JPG, WEBP) |
| Data section | Excel files (.xlsx) |
| Font library | Font files (.ttf, .otf) |
| Designer canvas | Data columns (from the data panel) |
| Verification screen | Certificate files (PDF, PNG) |
Every screen must implement these states:
Loading
Loading project...
Empty
No certificates yet
Generate certificates to see them here.
[ Generate Certificates ]
Error
Something went wrong
We couldn't load this project.
[ Retry ]
Partial Success
38 certificates generated
4 certificates failed
[ View Successful ]
[ Review Failures ]
Offline
All local features remain available.
Certificate Studio supports two languages:
- Arabic (default) — RTL layout
- English — LTR layout
The UI automatically switches text direction based on the selected language. Arabic content in certificates (recipient names, course titles) renders correctly regardless of the application language.
All UI components are built with bidirectional text support.
- Navigation elements mirror correctly in RTL mode
- The Certificate Designer positions elements correctly for RTL certificate designs
- Text direction in certificate fields can be set to: Auto, LTR, or RTL
- The Auto setting detects the text content direction and applies it correctly
All primary actions are reachable by keyboard without a mouse:
- Tab to navigate between form fields
- Enter to confirm
- Escape to cancel or close panels
- Arrow keys to navigate lists
- Full keyboard shortcut set in the Certificate Designer
Design once. Generate many. Verify with confidence.
Certificate Studio aims to make the complete certificate lifecycle—from template authoring and recipient data to secure generation, distribution, and verification—available through a single cross-platform, offline-first workspace.