{"id":41673,"library":"online-compiler-widget","title":"Online Compiler Widget","description":"An online compiler widget for React applications, wrapping @xyflow/react to provide an embeddable code compilation interface. Current stable version is 1.0.31 with monthly updates. Key differentiators: built on top of @xyflow/react for visual programming with code compilation, supports React 18 and 19, and includes TypeScript definitions. It is designed for embedding in educational or coding tools that require interactive code execution.","status":"active","version":"1.0.31","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install online-compiler-widget","lang":"bash","label":"npm"},{"cmd":"yarn add online-compiler-widget","lang":"bash","label":"yarn"},{"cmd":"pnpm add online-compiler-widget","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency used for rendering the widget's flow-based UI","package":"@xyflow/react","optional":false},{"reason":"Peer dependency required as it is a React component","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"ESM-only; use named import. Do not default import.","wrong":"const OnlineCompilerWidget = require('online-compiler-widget')","symbol":"OnlineCompilerWidget","correct":"import { OnlineCompilerWidget } from 'online-compiler-widget'"},{"note":"Named hook for accessing compiler state.","symbol":"useCompiler","correct":"import { useCompiler } from 'online-compiler-widget'"},{"note":"Named import, not default. Required as context provider.","wrong":"import CompilerProvider from 'online-compiler-widget'","symbol":"CompilerProvider","correct":"import { CompilerProvider } from 'online-compiler-widget'"}],"quickstart":{"code":"import { OnlineCompilerWidget } from 'online-compiler-widget';\nimport { ReactFlowProvider } from '@xyflow/react';\n\nfunction App() {\n  return (\n    <ReactFlowProvider>\n      <OnlineCompilerWidget />\n    </ReactFlowProvider>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Shows the minimal setup: wrapping the OnlineCompilerWidget inside ReactFlowProvider from @xyflow/react, both of which are required."},"warnings":[{"fix":"Install @xyflow/react@^12.0.0 and ensure it is included in your project dependencies.","message":"Requires @xyflow/react v12+ as a peer dependency. Using older versions will cause runtime errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Wrap the widget with <ReactFlowProvider> at an appropriate level in the component tree.","message":"The widget must be wrapped in ReactFlowProvider from @xyflow/react, otherwise it will throw an error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Watch for updates and migrate when breaking changes occur.","message":"Version 1.0.x uses the old compiler API. Newer APIs may be introduced in future versions.","severity":"deprecated","affected_versions":"1.0.x"}],"env_vars":null,"search_vec":"'1.0.31':24 '18':43 '19':45 'applic':10 'built':30 'code':17,39,58,63 'compil':2,6,18,40 'current':20 'definit':49 'design':52 'differenti':29 'educ':56 'embed':54 'embedd':16 'execut':64 'includ':47 'interact':62 'interfac':19 'javascript':65 'key':28 'month':26 'onlin':1,5 'program':37 'provid':14 'react':9,42 'requir':61 'stabl':21 'support':41 'tool':59 'top':32 'typescript':48,66 'updat':27 'version':22 'visual':36 'widget':3,7 'wrap':11 'xyflow/react':12,34","created_at":"2026-06-04T18:53:32.996651+00:00","updated_at":"2026-06-04T18:53:32.996651+00:00","problems":[{"fix":"Run `npm install @xyflow/react@^12.0.0`","cause":"Missing or incompatible peer dependency @xyflow/react.","error":"Error: @xyflow/react is not installed or version mismatch"},{"fix":"Wrap the OnlineCompilerWidget with <ReactFlowProvider> from '@xyflow/react'.","cause":"The component is not wrapped in ReactFlowProvider.","error":"TypeError: Cannot read properties of undefined (reading 'getNodes')"},{"fix":"Run `npm install online-compiler-widget` and ensure the import is correct: `import { OnlineCompilerWidget } from 'online-compiler-widget'`.","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'online-compiler-widget'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"online-compiler-widget","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops","testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}