JsDok Library Demo
v 0.1.0-beta.2
Basic DOM Manipulation
Add Element
Change Text
Toggle Visibility
This is a sample text that will be manipulated
Animation Effects
Fade In/Out
Slide Up/Down
Shake
Pulse
Flip
Bounce
Effect Box
Mouse Interaction
Add Tooltip
Add Tilt Effect
Add Ripple Effect
Add Magnify Effect
Hover Me
Draggable Elements
Drag
Text Effects
Typewriter
Scramble
Rainbow
Emojify
This is a sample text for demonstrating special effects
Progress and Loading
Start Progress
Start Countdown
Confetti!
Word Cloud Generator
JsDok is a lightweight alternative to jQuery with similar core functionality for DOM manipulation, event handling, Ajax requests, and animations, plus additional fun and interesting methods. It provides a great way to manipulate the Document Object Model, handle events, create animations, and make AJAX requests with a clean and concise syntax. The library includes many special effects like shake, pulse, tilt, typewriter, rainbow text, confetti explosions, and word clouds.
Generate Word Cloud
Ajax Example
Load Data
Form Handling
Submit Form
Reset to Default
Blank All (Keep Hidden)
Blank All (Including Hidden)
Reset Form
Username:
Email:
Role:
User
Admin
Subscribe to newsletter
Bio:
Hello World
Storage Operations
Save to Storage
Load from Storage
Save Cookie
Load Cookie
Save to Session
Load from Session
File to Base64 Conversion
Instance Method
Convert File
0%
Static Method (Drag & Drop)
Drag and drop a file here
IndexedDB Operations
Initialize DB
Add Record
Get All Records
Update Record
Delete Record
Advanced Features Demo
Virtual DOM Updates
Full Update
Patch Update
Initial Content
This will be updated using Virtual DOM
State Management
Increment
Decrement
Reset
Count: 0
Physics-based Animations
Spring Animation
Bouncy Motion
Physics Box
WebSocket Demo
Connect
Send Message
Disconnect
User Activity Tracking
Start Tracking
Stop Tracking
10 Seconds
30 Seconds
1 Minute
5 Minutes
Current Session
Screen Time:
0s
Mouse Clicks:
0
Key Presses:
0
Scroll Events:
0
Status
Tab Focus:
Active
Last Active:
Now
Blur Events:
0
Idle Time:
0s
Activity Log
Smart Table Demo
DOM Traversal & Manipulation Examples
DOM Traversal
Sibling 1
Target Element
Sibling 2
Sibling 3
Find Closest
Find Siblings
Get First
Get Last
Get Index 2
DOM Manipulation
Target for insertion
Content to manipulate
Insert Before
Insert After
Wrap Element
Wrap Inner
Unwrap
Dimensions & Scroll
Scrollable content
Get Dimensions
Scroll To Bottom
Get Scroll Position