DEV Community

Cover image for How Syncfusion Uses Its Own Developer Tools to Build SaaS Products
Lucy Muturi for Syncfusion, Inc.

Posted on Originally published at syncfusion.com on

How Syncfusion Uses Its Own Developer Tools to Build SaaS Products

TL;DR: What happens when a developer-tools company becomes a customer of its own technology? At Syncfusion, the same reusable UI and document technologies we offer our developers also power BoldSign, BoldDesk, Bold BI, and Bold Reports. Each product solves a different problem, but together they show the same principle: reuse common engineering building blocks, invest in domain-specific innovation, and learn from using those tools in real SaaS products.

When developers evaluate a UI component library or document-processing platform, they usually ask familiar questions.

Does it support the frameworks we use? Is it fast? Can we customize it? Are the APIs intuitive? Is the documentation good? What about accessibility, support, and licensing? Will it scale with the application?

There is another question worth asking:

Does the company building the technology trust it enough to use it in its own products?

At Syncfusion®, we do.

Technologies from Syncfusion’s own developer ecosystem, including UI components, data visualization controls, document-processing libraries, viewers, editors, and related SDKs, are used as building blocks across BoldSign, BoldDesk, Bold BI, and Bold Reports.

Those four SaaS products solve very different problems:

  • BoldSign supports eSignature and document processing.
  • BoldDesk provides customer-support and help-desk experiences.
  • Bold BI delivers analytics and dashboards.
  • Bold Reports supports report design, processing, viewing, and delivery.

That difference is what makes their use of shared technologies interesting.

A PDF-processing library inside an eSignature platform solves a very different problem from a DataGrid inside a support workspace. A TreeView inside an analytics designer serves a different purpose from the same type of navigation control inside a reporting application.

The reusable technology is only one layer.

Each product combines those building blocks with its own business logic, APIs, services, security, data models, processes, infrastructure, and product experience.

A component is a building block, not the product. Its value is in solving recurring engineering problems so product teams can focus more of their effort on the functionality that differentiates their application.

Let’s look at how that works across four very different Syncfusion products.

One technology ecosystem, four SaaS experiences

At a high level, the relationship looks like this:

Product Primary experience Shared technology area
BoldSign eSignature and document processes PDF and document processing
BoldDesk Customer support UI components and interaction controls
Bold BI Analytics and dashboards UI, data-management, and visualization components
Bold Reports Reporting UI, visualization, reporting, and document technologies

The important part is not how many components appear in each product. It is how reusable technologies are combined with product-specific engineering to solve real business problems.

BoldSign: From document processing to eSignature management

Electronic signatures revolve around documents.

Users upload contracts, agreements, consent forms, offer letters, and other business files. Those documents may need to be prepared for signing, converted into an appropriate format, populated with fields, processed, signed, and ultimately delivered as completed records.

That creates two distinct layers of engineering.

  • The first is document mechanics.
  • The second is the eSignature processing built around those mechanics.

Creating an eSignature using BoldSign

The reusable document layer

BoldSign uses Syncfusion document-processing technologies for operations that can include:

  • Drawing text into documents.
  • Extracting text.
  • Accessing PDF form fields.
  • Flattening interactive form fields.
  • Processing supported document formats.
  • Converting supported Word, Excel, and PowerPoint documents to PDF.

A simplified document flow can be represented as:

Input document → Conversion → PDF processing → Form-field handling → Signing → Completed document

The underlying document technologies handle the mechanics of working with files. BoldSign then adds the product-specific experience around them.

Signing an employment contract using BoldSign


Signing an employment contract using BoldSign

What BoldSign adds

An eSignature platform needs much more than PDF manipulation.

The product layer handles capabilities such as:

  • Signer management
  • Signing order
  • Authentication
  • Templates
  • Notifications and reminders
  • Status tracking
  • Audit history
  • APIs and integrations
  • Business rules
  • Team operations

This separation is useful from an architecture perspective.

The reusable document layer solves document-processing problems. BoldSign concentrates its product engineering on how people prepare, send, sign, track, and manage agreements.

Developer takeaway: Reuse document mechanics where they are not your differentiator. Invest your product engineering in the process that creates value for your users.

BoldDesk: Composing UI components into a support workspace

A customer-support platform presents a completely different challenge.

A support agent may need to work with a ticket queue, customer information, conversations, attachments, status changes, internal collaboration, dashboards, and configuration, all within the same application.

No single UI component creates that experience. Instead, the product is assembled from many smaller interaction patterns.

Ticket management

Support teams regularly work with large sets of structured records.

Components such as DataGrid, Query Builder, and editing controls can provide a foundation for viewing, filtering, searching, and updating ticket and customer information.

Conceptually:

DataGrid + Query Builder + editing → Ticket management

Using BoldDesk for internal ticket management at Syncfusion


Using BoldDesk for internal ticket management at Syncfusion

BoldDesk then adds the support-domain logic:

  • Ticket status
  • Priority
  • Assignment
  • Customer context
  • SLA behavior
  • Permissions
  • Automation
  • Support operations

The grid knows how to display and manipulate records. BoldDesk knows what those records mean.

Advanced filter options in BoldDesk


Advanced filter options in BoldDesk

Customer conversations

Support agents also need to communicate effectively with customers and coworkers.

Components such as:

can form part of the communication experience.

Together, they support rich replies, collaboration, mentions, and attachments.

Conceptually:

Rich Text Editor + Mention + File Upload → Customer communication

BoldDesk adds the surrounding product context: ticket history, collaboration rules, channels, customer information, and process state.

Support analytics and navigation

Charts and layout components help present operational information, while input, navigation, dialog, toolbar, and selection controls support the many smaller interactions found throughout a help-desk application.

Rather than building every interaction independently, product teams can compose reusable components into a consistent experience.

Developer takeaway: Large SaaS interfaces are often built from many focused components rather than one enormous domain-specific control.

The individual component solves a bounded UI problem. The product gives that interaction business meaning.

Bold BI: Building a complex analytics workspace

Analytics software introduces a different level of interaction density. A dashboard is not merely a page containing charts.

Users may need to:

  • Connect to data
  • Explore schemas
  • Choose fields
  • Add visualizations
  • Drag and resize widgets
  • Configure properties
  • Apply filters
  • Organize dashboards
  • Manage users
  • Share or embed analytics

A dashboard designer can therefore behave more like an interactive workspace than a static webpage.

Designer interactions

Controls such as:

can provide the interaction primitives needed to construct the designer environment.

Conceptually:

Toolbar + Menu + Tab + Splitter + drag-and-drop → Designer workspace

Creating dashboards using Bold BI


Creating dashboards using Bold BI

Bold BI then provides the analytics-specific layer:

  • Dashboard models.
  • Data relationships.
  • Widget behavior.
  • Filtering.
  • Visualization semantics.
  • Sharing.
  • Embedding.
  • Governance.

Data and schema management

Analytics applications also need to help users navigate data structures.

Components such as TreeView, DropDown Tree, AutoComplete, DataGrid, and ListBox can support data selection and exploration.

Conceptually:

Tree and grid controls + selection components → Data and schema management

The controls provide navigation and selection behavior. Bold BI determines what the data represents and how it contributes to an analysis.

Using Bold BI and Bold Reports for sales analysis


Using Bold BI and Bold Reports for sales analysis

Configuration-heavy interfaces

An analytics designer can expose a large number of settings.

Users may need to configure:

  • Dimensions
  • Measures
  • Dates
  • Colors
  • Ranges
  • Labels
  • Number formats
  • Filtering
  • Sorting
  • Interaction behavior

Reusable input components such as drop-down lists, check boxes, numeric inputs, date pickers, sliders, and color pickers can provide a consistent way to expose those settings.

Building a hospital management dashboard using Bold BI


Building a hospital management dashboard using Bold BI

Developer takeaway: Reusable UI primitives become increasingly valuable as the number of coordinated interactions in an application grows.

A single control may be small. A consistent collection of them can form the interaction foundation of a sophisticated product.

Read the full blog post on the Syncfusion Website

Top comments (0)