Molecules & reactions
Embed a browser editor for atoms, bonds, rings and reaction structures inside the workflow your users already follow.
JSME Editor / Scientific web applications
Molecule editor.
Inside your web app.
Bring chemical structure drawing into your website, research tool or learning platform. I integrate the open-source JSME editor with your forms, APIs and scientific workflows.
Browser-based structure inputSMILES & Molfile workflowsIntegration & custom UI
JSME EditorWorkflow preview
Example SMILES output
Oc1ccccc1Illustration of a structure-input workflow. Open the original JSME demo to try the actual editor.
Who it is for
Structure input.
Without a separate app.
For chemistry education teams, research platforms and chemical databases that need users to enter a structure directly into a web application.
- Draw instead of uploading a screenshot.
- Connect structure input to a search or submission form.
- Keep the surrounding interface clear on desktop and mobile.
Scientific web applications
The useful details.
Connected.
Choose the modules and integration work that fit your actual requirements. The implementation scope is agreed before development.
Structure formats
Connect supported SMILES, SMARTS and Molfile output to the data format your application expects.
Scientific product UI
Build the form, validation, previews and loading states around the editor so users understand the next step.
API & database connections
Capture structure data, link it to records and connect agreed search, storage or processing APIs.
React & Next.js integration
Plan loading and lifecycle handling for a modern frontend, including client-side editor behaviour where needed.
A considered handover
Document the embedding approach, output mappings and important checks so your team can maintain the integration.
How the workflow fits together
A clear path.
From input to next action.
- 01
Draw a structure
The user creates or imports a molecule in the browser.
- 02
Read the output
The application receives the agreed structure format.
- 03
Validate & connect
Check required data and pass it to your API or database.
- 04
Use the result
Show a search result, saved record or next workflow step.
Around the core workflow
A useful editor.
A complete workflow.
The integration is more than placing a drawing area on a page. We define what happens before a structure is entered, how it is stored, and what the user should see afterward.
JSME was developed by Peter Ertl and Bruno Bienfait. The editor is an open-source project; my service covers integration, surrounding UI and custom development. Its BSD-3-Clause licence and attribution requirements apply. Original JSME project.
Education & learning
Structure exercises, assignment forms and chemistry learning interfaces.
Research & databases
Compound entry, molecule records and structure-based search interfaces.
Your existing application
A focused integration into an established React, Next.js or other web frontend.
Setup, customisation & handover
Your requirements.
A considered implementation.
Work directly with Jagjeet Singh, a full stack developer based in India and collaborating with teams remotely.
- Your frontend stack and current screens.
- Required input and output formats.
- APIs, validation and database workflow.
- Mobile behaviour, testing and handover.
What does it cost?
The proposal covers the work, data preparation, integrations and support you need. Hosting, paid tools and provider charges are identified separately. Share your current setup and priorities so we can agree a practical scope.
Jagjeet SinghFull Stack Developer · Integration & custom development
Make the rest work together
More around
your product.
Before you decide
Good questions.
Clear answers.
Understand the product, the scope and the implementation before choosing the next step.
Do you own or create the JSME editor?
JSME is an existing open-source molecule editor developed by Peter Ertl and Bruno Bienfait. I offer integration and custom interface development around it, with the project’s attribution retained.
Can you integrate JSME into React or Next.js?
Yes. We review your frontend, choose an embedding approach and connect the editor’s output to your components, forms and APIs. The scope includes the client-side lifecycle and the states your users need.
Which chemical structure formats can we use?
JSME supports common chemistry formats including SMILES, SMARTS and Molfile workflows. We confirm the precise import and export requirements, downstream systems and validation rules before implementation.
Can the editor be used in a commercial application?
JSME uses the BSD-3-Clause licence. Your project should retain the required copyright and licence notices. Integration, application development and hosting are scoped separately.
What determines the integration cost?
The embedding approach, surrounding screens, format conversions, API connections and testing requirements determine the quote. Send your app details and an example user journey for a scoped proposal.