A Svelte component and action for rendering elements outside their parent component's DOM hierarchy.
Svelte Portal is a Svelte library that enables rendering components or elements outside their parent component's DOM hierarchy. It solves the problem of creating UI elements like modals, tooltips, or notifications that need to escape parent styling, clipping, or positioning constraints by allowing them to be placed elsewhere in the DOM, such as directly in the body.
Svelte developers building applications that require modals, dropdowns, tooltips, notifications, or other UI elements that must render outside their parent component's DOM tree.
Developers choose Svelte Portal for its simplicity, dual API (component and action), and lightweight approach to a common Svelte need, without the overhead of larger UI libraries.
Svelte component for rendering outside the DOM of parent component
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
The library provides a simple <Portal> component with only a target prop and a portal action, reducing complexity and learning curve. Evidence: README shows basic usage with minimal configuration.
Offers both component-based and action-based approaches, giving flexibility for different scenarios, especially useful for SSR compatibility. Evidence: README includes examples for both <Portal> and portal action with SSR notes.
Includes TypeScript definitions when imported from the specific source path, ensuring type safety for TypeScript users. Evidence: README specifies importing from 'svelte-portal/src/Portal.svelte' for typing support.
The action API handles server-side rendering by using a hidden attribute that's removed after portal movement, preventing hydration issues. Evidence: README mentions the hidden attribute is only needed for SSR.
Focuses only on rendering and lacks common portal enhancements like accessibility attributes, focus trapping, or event handling. Evidence: README covers basic rendering but no advanced features.
The README is concise but missing examples for edge cases, error handling, or integration with state management and animations. Evidence: Only basic usage examples are provided without deeper guides.
TypeScript users must import from a non-standard path ('svelte-portal/src/Portal.svelte'), which can be confusing and lead to import errors. Evidence: README explicitly states this requirement for TypeScript support.
Provides no CSS, transitions, or animations for portal content, requiring manual implementation for polished UI elements. Evidence: Project description and README focus solely on rendering, not styling.