ScriptWidget 🎨

Create native widgets for iOS & macOS using JavaScript and JSX

English | 中文

✨ Build iOS/macOS widgets without Swift. Just JavaScript, JSX, and creativity.

---

🎯 What is ScriptWidget?

ScriptWidget is a powerful widget development platform that lets you create native iOS and macOS widgets using JavaScript and JSX-like syntax. No Swift required!

Think of it as "React Native for Widgets" - but simpler and more flexible.

---

✨ Features

Feature	Description
🖥️ Cross-Platform	One codebase for iOS and macOS widgets
🎨 JSX Support	Declarative UI with JavaScript XML syntax
⚡ Native Performance	Compiled to native Swift/SwiftUI
🔧 Rich APIs	Access device sensors, data sources, and more
📱 Interactive Widgets	Tap, swipe, and interact with widgets
🎨 Custom Styling	Full control over appearance
📦 Template Gallery	Pre-built templates to get started
🔄 Live Preview	See changes instantly in Xcode

---

🚀 Quick Start

1. Download

# Clone the repository
git clone https://github.com/everettjf/ScriptWidget.git
cd ScriptWidget

2. Open in Xcode

open ScriptWidget/ScriptWidget.xcodeproj

3. Run & Explore

1. Select your target (iOS Simulator or macOS)
2. Press Cmd + R to build and run
3. Explore the example widgets in Examples/

---

📁 Project Structure

ScriptWidget/
├── ScriptWidget/          # Main app source
│   ├── App/               # App entry point
│   ├── Script/            # JavaScript runtime
│   ├── Views/             # SwiftUI views
│   └── Resources/         # Assets and templates
├── Examples/              # Example widgets
│   ├── HelloWorld/        # Simple widget
│   ├── Weather/           # Weather widget
│   ├── Calendar/          # Calendar widget
│   └── ...                # More examples
├── Templates/             # Widget templates
├── Docs/                  # Documentation
└── README.md

---

💻 Example Widgets

Hello World

// A simple widget
function render() {
  return (
    <widget type="medium">
      <text style={{ fontSize: 24, color: '#333' }}>
        Hello, ScriptWidget! 👋
      </text>
    </widget>
  );
}

Weather Widget

function WeatherWidget({ location }) {
  const [weather] = useWeather(location);
  
  return (
    <widget type="large">
      <view style={{ padding: 16 }}>
        <text style={{ fontSize: 32 }}>
          {weather.temperature}°C
        </text>
        <text style={{ fontSize: 16 }}>
          {weather.condition}
        </text>
      </view>
    </widget>
  );
}

Todo List

function TodoList({ todos }) {
  return (
    <widget type="medium">
      <list data={todos} render={(item) => (
        <row>
          <checkbox checked={item.done} />
          <text>{item.title}</text>
        </row>
      )} />
    </widget>
  );
}

---

🛠️ Development

Prerequisites

• Xcode 14+ (for iOS 16+ / macOS 13+)
• macOS 13+ (Ventura or later)
• iOS 16+ (for iOS widgets)

Build from Source

# Clone and setup
git clone https://github.com/everettjf/ScriptWidget.git
cd ScriptWidget

# Open in Xcode
open ScriptWidget/ScriptWidget.xcodeproj

# Build and run (Cmd + R)

Create Your Own Widget

# 1. Duplicate an example
cp -r Examples/HelloWorld Examples/MyWidget

# 2. Edit the JavaScript file
cd Examples/MyWidget
vim script.js  # Write your widget code

# 3. Run and preview in the app

---

📚 Documentation

Core Concepts

• Widget Types - small, medium, large, accessory
• Components - text, image, list, grid, etc.
• Styling - CSS-like inline styles
• Data Sources - weather, calendar, reminders, etc.
• Interactions - tap, swipe, long press

APIs

API	Description
useWeather()	Get weather data
useCalendar()	Access calendar events
useReminders()	Fetch reminder lists
useLocation()	Get device location
useHealth()	HealthKit data
useNetwork()	Network requests

---

🎨 Gallery

Sample widgets created with ScriptWidget

---

📱 Platforms

Platform	Support	Notes
iOS	✅ Full	iOS 16+ (iPhone, iPad)
macOS	✅ Full	macOS 13+ (Mac)
watchOS	🔄 Planned	Future release
visionOS	🔄 Planned	Future release

---

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

Ways to Contribute

• 🐛 Report bugs
• 💡 Suggest features
• 🔧 Submit pull requests
• 📝 Write documentation
• 🎨 Share your widgets

---

📜 License

ScriptWidget is released under the MIT License.

---

🙏 Acknowledgements

Built with:

• JavaScriptCore - Apple's JavaScript engine
• SwiftUI - Modern UI framework
• Xcode Gen - Project generation

Inspired by:

• React - Component-based UI
• React Native - Mobile development
• WidgetKit - Apple's widget framework

---

📈 Star History

---

📞 Support

有问题？去 Issues 提问！

---

Made with ❤️ by Everett

Project Link: https://github.com/everettjf/ScriptWidget