diff --git a/@types/DiagramSchema.ts b/@types/DiagramSchema.ts
index 2639876..ea49775 100644
--- a/@types/DiagramSchema.ts
+++ b/@types/DiagramSchema.ts
@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react';
 
 export type PortAlignment = 'right' | 'left' | 'top' | 'bottom';
 
@@ -18,13 +18,19 @@ export type Node<P> = {
   inputs?: Port[];
   outputs?: Port[];
   type?: 'default';
-  render?: (
-    props: Omit<Node<P>, 'coordinates'>
-  ) => ElementType | ReactNode;
+  render?: (props: NodeRenderProps<P>) => ElementType | ReactNode;
   className?: string;
   data?: P;
 };
 
+export type NodeRenderProps<P> = Omit<
+  Node<P>,
+  'coordinates' | 'disableDrag' | 'inputs' | 'outputs'
+> & {
+  inputs: ReactElement<Port & HTMLAttributes<HTMLDivElement>>[];
+  outputs: ReactElement<Port & HTMLAttributes<HTMLDivElement>>[];
+};
+
 export type Link = {
   input: string;
   output: string;
diff --git a/index-tests.tsx b/index-tests.tsx
index ab6b0c7..2e5a99a 100644
--- a/index-tests.tsx
+++ b/index-tests.tsx
@@ -48,19 +48,22 @@ export const UncontrolledDiagram2 = () => {
         schema.nodes[schema.nodes.length - 1].coordinates[0] + 10,
         schema.nodes[schema.nodes.length - 1].coordinates[1] + 20,
       ],
-      render: ({ content, data }) => (
+      render: ({ content, data, inputs, outputs }) => (
         <div
           onDoubleClick={data?.onDoubleClick}
           role='button'
           style={{ padding: '15px', background: 'purple' }}
         >
           {content}
+          {inputs.map((input) => (<div>{input.props.id}</div>))}
+          {outputs.map((output) => (<div>{output.props.id}</div>))}
         </div>
       ),
       data: {
         onDoubleClick: () => alert(`Schema length is: ${schema.nodes.length}`),
       },
       inputs: [{ id: `port-${schema.nodes.length + 1}` }],
+      outputs: [{ id: `port-${schema.nodes.length + 1}` }],
     });
 
   const removeLast = () => {