This blog post aims to guide you through the process of creating a framework-agnostic web SDK, from initial setup to deployment.<\/strong> Whether you’re a seasoned developer or new to SDK design, you’ll gain insights and practical tips to make your SDK accessible to developers everywhere.<\/p>\n\n\n\n A framework-agnostic SDK is designed to work seamlessly across multiple frameworks, such as React, Vue, Angular, or even vanilla JavaScript.<\/strong><\/p>\n\n\n\n The goal is to maximize usability and minimize dependency on specific tools or libraries, ensuring that developers working in various ecosystems can integrate your SDK without friction.<\/p>\n\n\n\n This approach not only broadens your SDK’s audience but also simplifies maintenance and reduces versioning headaches.<\/strong><\/p>\n\n\n\n Key aspects of a framework-agnostic SDK:<\/p>\n\n\n\n Selecting the right stack is critical when building a framework-agnostic SDK. Here\u2019s a breakdown:<\/p>\n\n\n\n A well-designed API is the cornerstone of a successful SDK. So focus on:<\/p>\n\n\n\n Modularity<\/strong><\/p>\n\n\n\n Backward Compatibility<\/strong><\/p>\n\n\n\n Documentation<\/strong><\/p>\n\n\n\n Let\u2019s give a quick example of what a framework-agnostic SDK would look like.<\/p>\n\n\n\n For this example, we will create an SDK for managing custom keyboard shortcuts across a web application, allowing developers to easily bind and unbind shortcuts to specific actions.<\/p>\n\n\n\n A good way to start is to define how you will use the SDK. Given the features above, we should use the SDK as follows:<\/p>\n\n\n\n 5. Show a tooltip when registering a shortcut<\/strong><\/p>\n\n\n For example purposes, the SDK will be whole exported in Let\u2019s initialize the Vite project:<\/p>\n\n\n Give it a name when prompted. Select \u2018Vanilla\u2019 when prompted for a framework (which means no specific framework will be used), and then choose TypeScript as the variant.<\/p>\n\n\n\n Follow the instructions given by Vite\u2019s cli: go to the folder created with the project name and run `npm install` (or use any package manager you want).<\/p>\n\n\n\nWhat Does Framework-Agnostic Mean?<\/h2>\n\n\n\n
\n
Why Build Framework-Agnostic SDKs?<\/strong><\/h2>\n\n\n\n
![\"Why](\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2025\/04\/Why-Build-Framework-Agnostic-SDKs-1200x711.png\")
<\/figure>\n\n\n\nChoosing the Right Tools and Technologies<\/h2>\n\n\n\n
\n
\n
Core Considerations and API Design<\/h2>\n\n\n\n
\n
\n
Example:<\/strong> Instead of import { FullSDK } from 'sdk';, enable import { SpecificFeature } from 'sdk';.<\/code><\/li>\n<\/ul>\n\n\n\n\n
\n
Keyboard Shortcut SDK<\/h2>\n\n\n\n
Main Features<\/strong><\/h3>\n\n\n\n
\n
\n
Ctrl + S<\/code>) to trigger specific functions.<\/li>\n<\/ul>\n<\/li>\n\n\n\n\n
\n
\n
1. Import and Initialize the SDK<\/strong><\/h4>\n\n\n
import<\/span> { initialize } from<\/span> '.\/keyboardShortcutSDK'<\/span>;\n\n\ninitialize();<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n2. Register Global Shortcuts<\/strong><\/h4>\n\n\n
<code>import<\/span> { keyboardShortcutSDK } from<\/span> '.\/keyboardShortcutSDK'<\/span>;\n\nkeyboardShortcutSDK().register('Ctrl+S'<\/span>, () => {\n\u00a0\u00a0console<\/span>.log('Save triggered!'<\/span>);\n\u00a0\u00a0alert('Document saved!'<\/span>);\n});<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n3. Register Context-Specific Shortcuts<\/strong><\/h4>\n\n\n
import<\/span> { keyboardShortcutSDK } from<\/span> '.\/keyboardShortcutSDK'<\/span>;\n\nconst<\/span> modalIsOpen = ()<\/span> =><\/span> document<\/span>.querySelector('#myModal'<\/span>).classList.contains('open'<\/span>);\n\nkeyboardShortcutSDK.register('Escape'<\/span>, () => {\n\u00a0\u00a0console<\/span>.log('Modal closed!'<\/span>);\n\u00a0\u00a0document<\/span>.querySelector('#myModal'<\/span>).classList.remove('open'<\/span>);\n}, { condition<\/span>: modalIsOpen });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n4. Unregister Shortcuts<\/strong><\/h4>\n\n\n
import<\/span> { keyboardShortcutSDK } from<\/span> '.\/keyboardShortcutSDK'<\/span>;\n\nkeyboardShortcutSDK.unregister('Ctrl+S'<\/span>); \/\/ Remove the save shortcut<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nimport<\/span> { keyboardShortcutSDK } from<\/span> '.\/keyboardShortcutSDK'<\/span>;\n\nkeyboardShortcutSDK.register('Ctrl+S'<\/span>, () => {\n\u00a0\u00a0console<\/span>.log('Save triggered!'<\/span>);\n\u00a0\u00a0alert('Document saved!'<\/span>);\n}, { feedback<\/span>: { enabled<\/span>: true<\/span>, message<\/span>: \"Press 'Ctrl+S' to save.\"<\/span> } });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nkeyboardShortcutSDK<\/code>, but keep in mind modularity when creating your SDK, as we saw in the core considerations session.<\/p>\n\n\n\nInitializing Vite project<\/h3>\n\n\n\n
npm create vite@latest<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n![\"Initializing](\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2025\/04\/Screenshot-2025-02-18-at-17.19.22-1200x879.png\")
<\/figure>\n\n\n\n
![\"\"](\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2025\/04\/Screenshot-2025-02-18-at-17.22.29-1200x763.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2025\/04\/Screenshot-2025-02-18-at-17.26.43-600x515.png\")
<\/figure>\n<\/div>\n\n\n