← Back to Examples

📚 Client Rendering

Dynamic SMILES rendering in the browser

🎮 Interactive Demo

Try editing the markdown content and rendering options below to see client-side rendering in action:

0.6

🔧 Configuration Examples

Basic Client Rendering Setup

JavaScript Configuration
// Client-side rendering (default)
const md = markdownit().use(MarkdownItSmiles, {
  renderAtParse: false,
  smilesDrawerOptions: {
    default: {
      width: 400,
      height: 300,
      theme: 'light'
    }
  }
})
Rendered Output

Dynamic Content Update

Dynamic Rendering Example
// Update content dynamically
function updateContent(newMarkdown) {
  const html = md.render(newMarkdown)
  document.getElementById('content').innerHTML = html
  
  // Re-apply smiles-drawer to new content
  if (window.SmiDrawer) {
    SmiDrawer.apply()
  }
}
Example Output

Custom Rendering Options

Advanced Configuration
const md = markdownit().use(MarkdownItSmiles, {
  renderAtParse: false,
  smilesDrawerOptions: {
    default: {
      width: 500,
      height: 400,
      bondThickness: 1.2,
      theme: 'dark'
    },
    inline: {
      width: 60,
      height: 60,
      bondThickness: 0.8
    },
    block: {
      width: 600,
      height: 500,
      padding: 30
    }
  }
})
Custom Styled Output