Set a Molfile at Startup
A molfile can be set at startup through one of two mechanisms: linking or inlining. A linked molfile is referenced by its URL, whereas an inlined molfile is embedded into the HTML document itself.
Linked Molfiles
To set a molfile by linking to it, use its URL as the value of the data-chemwriter-structure attribute. Cross-origin request will be handled by ChemWriter using Cross-Origin Resource Sharing (CORS).
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load Editor with Linked Molfile at Startup | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js"
data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt">
</script>
<style>
.editor { height: 350px; max-width: 500px; }
</style>
</head>
<body>
<div class="editor">
<div data-chemwriter-ui="editor"
data-chemwriter-src="https://chemwriter.com/data/structure-1.mol">
</div>
</div>
</body>
</html>
Linking incurs the cost of an additional request to fetch the molfile. Caching can improve performance for frequently-used molfiles.
The same linking mechanism used by Editor is also used by Image, as demonstrated below.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load Image with Linked Molfile at Startup | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js"
data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt">
</script>
<style>
.image { height: 250px; max-width: 300px; }
</style>
</head>
<body>
<div class="image">
<div data-chemwriter-ui="image"
data-chemwriter-src="https://chemwriter.com/data/structure-1.mol">
</div>
</div>
</body>
</html>
Inlined Molfiles
To set a molfile by inlining it, use the molfile as a value of data‑chemwriter‑data attribute, escaping newlines with the \n character sequence. Although inlined molfiles incur no HTTP request overhead, they are also not individually cacheable.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load Image with Linked Molfile at Startup | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js"
data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt">
</script>
<style>
.image { height: 250px; max-width: 300px; }
</style>
</head>
<body>
<div class="image">
<div data-chemwriter-ui="image"
data-chemwriter-data="[NO NAME]\n CHEMW2 02061315242D \nCreated with ChemWriter - http://chemwriter.com\n 12 12 0 0 1 0 999 V2000\n 5.6944 -5.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.5605 -6.0278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.4265 -5.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.4265 -4.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 6.5605 -4.0278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 5.6944 -4.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.2925 -4.0278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1585 -4.5278 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 10.0246 -4.0278 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 8.2925 -3.0278 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 4.8284 -4.0278 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 4.8284 -6.0278 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 2 3 1 0 0 0 0\n 3 4 2 0 0 0 0\n 4 5 1 0 0 0 0\n 5 6 2 0 0 0 0\n 6 1 1 0 0 0 0\n 4 7 1 0 0 0 0\n 7 8 1 0 0 0 0\n 8 9 1 0 0 0 0\n 7 10 1 4 0 0 0\n 6 11 1 0 0 0 0\n 1 12 1 0 0 0 0\nM END\n">
</div>
</div>
</body>
</html>